目次
ラジオボタンのデザインサンプル一覧
デフォルト
<input class="" type="radio" name="item" id="a0"/>
<span class="t8-radiobtn-0"><label for="a0">ボタン1</label></span>
<input class="" type="radio" name="item" id="b0"/>
<span class="t8-radiobtn-0"><label for="b0">ボタン2</label></span>
<input class="" type="radio" name="item" id="c0"/>
<span class="t8-radiobtn-0"><label for="c0">ボタン3</label></span>
円形
<input class="t8-input" type="radio" name="item" id="a1"/>
<span class="t8-radiobtn-1"><label for="a1">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b1"/>
<span class="t8-radiobtn-1"><label for="b1">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c1"/>
<span class="t8-radiobtn-1"><label for="c1">ボタン3</label></span>.t8-radiobtn-1 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-1 label::before,
.t8-radiobtn-1 label::after {
content: "";
display: block;
border-radius: 50%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-1 label::before {
border: 3px solid #808080;
border-radius: 50%;
width: 20px;
height: 20px;
left: 5px;
}
.t8-radiobtn-1 label::after {
background-color: #0d6efd;
border-radius: 50%;
opacity: 0;
width: 16px;
height: 16px;
left: 7px
}
input:checked + .t8-radiobtn-1 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
角丸
<input class="t8-input" type="radio" name="item" id="a2"/>
<span class="t8-radiobtn-2"><label for="a2">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b2"/>
<span class="t8-radiobtn-2"><label for="b2">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c2"/>
<span class="t8-radiobtn-2"><label for="c2">ボタン3</label></span>.t8-radiobtn-2 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-2 label::before,
.t8-radiobtn-2 label::after {
content: "";
display: block;
border-radius: 30%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-2 label::before {
border: 3px solid #808080;
border-radius: 30%;
width: 20px;
height: 20px;
left: 5px;
}
.t8-radiobtn-2 label::after {
background-color: #0d6efd;
border-radius: 30%;
opacity: 0;
width: 16px;
height: 16px;
left: 7px
}
input:checked + .t8-radiobtn-2 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
四角
<input class="t8-input" type="radio" name="item" id="a3"/>
<span class="t8-radiobtn-3"><label for="a3">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b3"/>
<span class="t8-radiobtn-3"><label for="b3">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c3"/>
<span class="t8-radiobtn-3"><label for="c3">ボタン3</label></span>.t8-radiobtn-3 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-3 label::before,
.t8-radiobtn-3 label::after {
content: "";
display: block;
border-radius: 0%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-3 label::before {
border: 3px solid #808080;
border-radius: 0%;
width: 20px;
height: 20px;
left: 5px;
}
.t8-radiobtn-3 label::after {
background-color: #0d6efd;
border-radius: 0%;
opacity: 0;
width: 16px;
height: 16px;
left: 7px
}
input:checked + .t8-radiobtn-3 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
括弧
<input class="t8-input" type="radio" name="item" id="a4"/>
<span class="t8-radiobtn-4"><label for="a4">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b4"/>
<span class="t8-radiobtn-4"><label for="b4">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c4"/>
<span class="t8-radiobtn-4"><label for="c4">ボタン3</label></span>.t8-radiobtn-4 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-4 label::before,
.t8-radiobtn-4 label::after {
content: " ";
display: block;
border-radius: 0%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-4 label::before {
border-left: 3px solid #808080;
border-right: 3px solid #808080;
border-radius: 50%;
width: 20px;
height: 20px;
left: 5px;
}
.t8-radiobtn-4 label::after {
background-color: #0d6efd;
border-radius: 50%;
opacity: 0;
width: 11px;
height: 11px;
left: 9px
}
input:checked + .t8-radiobtn-4 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
拡大
<input class="t8-input" type="radio" name="item" id="a5"/>
<span class="t8-radiobtn-5"><label for="a5">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b5"/>
<span class="t8-radiobtn-5"><label for="b5">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c5"/>
<span class="t8-radiobtn-5"><label for="c5">ボタン3</label></span>
.t8-radiobtn-5 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-5 label::before,
.t8-radiobtn-5 label::after {
content: "";
display: block;
border-radius: 0%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-5 label::before {
background-color: #0d6efd;
border-radius: 50%;
width: 10px;
height: 10px;
left: 5px;
}
.t8-radiobtn-5 label::after {
background-color: #0d6efd;
border-radius: 50%;
opacity: 0;
width: 20px;
height: 20px;
left: 2px
}
input:checked + .t8-radiobtn-5 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
縦並べ
<div class="t8-column">
<input class="t8-input" type="radio" name="item" id="a6"/>
<span class="t8-radiobtn-6"><label for="a6">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b6"/>
<span class="t8-radiobtn-6"><label for="b6">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c6"/>
<span class="t8-radiobtn-6"><label for="c6">ボタン3</label></span>.t8-column{
display: inline-flex;
flex-flow: column;
}
.t8-radiobtn-6 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-6 label::before,
.t8-radiobtn-6 label::after {
content: "";
display: block;
border-radius: 0%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-6 label::before {
border: 3px solid #808080;
border-radius: 0%;
width: 20px;
height: 20px;
left: 5px;
}
.t8-radiobtn-6 label::after {
background-color: #0d6efd;
border-radius: 0%;
opacity: 0;
width: 16px;
height: 16px;
left: 7px
}
input:checked + .t8-radiobtn-6 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
塗り潰し
<input class="t8-input" type="radio" name="item" id="a7"/>
<span class="t8-radiobtn-7"><label for="a7">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b7"/>
<span class="t8-radiobtn-7"><label for="b7">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c7"/>
<span class="t8-radiobtn-7"><label for="c7">ボタン3</label></span>.t8-radiobtn-7 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-7 label::before,
.t8-radiobtn-7 label::after {
content: "";
display: block;
border-radius: 0%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-7 label::before {
border: 3px solid #808080;
border-radius: 0%;
background: #808080;
width: 20px;
height: 20px;
left: 5px;
}
.t8-radiobtn-7 label::after {
background-color: #0d6efd;
border-radius: 0%;
opacity: 0;
width: 16px;
height: 16px;
left: 7px
}
input:checked + .t8-radiobtn-7 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
チェック
<input class="t8-input" type="radio" name="item" id="a8"/>
<span class="t8-radiobtn-8"><label for="a8">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b8"/>
<span class="t8-radiobtn-8"><label for="b8">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c8"/>
<span class="t8-radiobtn-8"><label for="c8">ボタン3</label></span>.t8-radiobtn-8 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-8 label::before,
.t8-radiobtn-8 label::after {
content: "";
display: block;
border-radius: 0%;
position: absolute;
}
.t8-radiobtn-8 label::before {
border-radius: 0%;
border: 3px solid #808080;
width: 20px;
height: 20px;
transform: translateY(-50%);
top: 50%;
left: 5px;
}
.t8-radiobtn-8 label::after {
border-bottom: 3px solid #0d6efd;
border-left: 3px solid #0d6efd;
opacity: 0;
height: 5px;
width: 10px;
transform: rotate(-45deg);
top: 5px;
left: 10px;
}
input:checked + .t8-radiobtn-8 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
アイコン
<input class="t8-input" type="radio" name="item" id="a9"/>
<span class="t8-radiobtn-9"><label for="a9">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b9"/>
<span class="t8-radiobtn-9"><label for="b9">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c9"/>
<span class="t8-radiobtn-9"><label for="c9">ボタン3</label></span>.t8-radiobtn-9 label {
position: relative;
cursor: pointer;
padding-left: 30px;
}
.t8-radiobtn-9 label::before,
.t8-radiobtn-9 label::after {
content: "";
display: block;
border-radius: 0%;
position: absolute;
}
.t8-radiobtn-9 label::before {
border-radius: 0%;
border: 3px solid #808080;
width: 20px;
height: 20px;
transform: translateY(-50%);
top: 50%;
left: 5px;
}
.t8-radiobtn-9 label::after {
font-family: "Font Awesome 5 Free";
content: '\f245';
font-weight: 900;
opacity: 0;
height: 5px;
width: 10px;
top: 5px;
left: 15px;
}
input:checked + .t8-radiobtn-9 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
ハイライト
<input class="t8-input" type="radio" name="item" id="a10"/>
<span class="t8-radiobtn-10"><label for="a10">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b10"/>
<span class="t8-radiobtn-10"><label for="b10">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c10"/>
<span class="t8-radiobtn-10"><label for="c10">ボタン3</label></span>.t8-radiobtn-10 label {
position: relative;
cursor: pointer;
padding: 10px;
margin-left: 30px;
border-radius: 20px;
}
.t8-radiobtn-10 label::before,
.t8-radiobtn-10 label::after {
content: "";
display: block;
border-radius: 0%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-10 label::before {
left: 5px;
}
.t8-radiobtn-10 label::after {
opacity: 0;
z-index: 3 ;
width: 50px;
}
input:checked + .t8-radiobtn-10 label {
z-index: 10;
background: #808080;
}
input:checked + .t8-radiobtn-10 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
アンダーライン
<input class="t8-input" type="radio" name="item" id="a11"/>
<span class="t8-radiobtn-11"><label for="a11">ボタン1</label></span>
<input class="t8-input" type="radio" name="item" id="b11"/>
<span class="t8-radiobtn-11"><label for="b11">ボタン2</label></span>
<input class="t8-input" type="radio" name="item" id="c11"/>
<span class="t8-radiobtn-11"><label for="c11">ボタン3</label></span>.t8-radiobtn-11 label {
position: relative;
cursor: pointer;
padding: 10px;
margin-left: 30px;
}
.t8-radiobtn-11 label::before,
.t8-radiobtn-11 label::after {
content: "";
display: block;
border-radius: 0%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.t8-radiobtn-11 label::before {
left: 5px;
}
.t8-radiobtn-11 label::after {
opacity: 0;
z-index: 3 ;
width: 50px;
}
input:checked + .t8-radiobtn-11 label {
z-index: 10;
border-bottom: 3px solid #808080;
}
input:checked + .t8-radiobtn-11 label::after {
opacity: 1;
}
.t8-input {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}