コピペでできるラジオボタンのデザインサンプル一覧[HTML/CSS]

2023年9月23日2023年9月25日

ラジオボタンのデザインサンプル一覧

デフォルト

ボタン1 ボタン2 ボタン3

<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>

円形

ボタン1 ボタン2 ボタン3

<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;
}

角丸

ボタン1 ボタン2 ボタン3

<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;
}

四角

ボタン1 ボタン2 ボタン3

<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;
}

括弧

ボタン1 ボタン2 ボタン3

<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;
}

拡大

ボタン1 ボタン2 ボタン3

<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;
}

縦並べ

ボタン1 ボタン2 ボタン3

<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;
}

塗り潰し

ボタン1 ボタン2 ボタン3

<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;
}

チェック

ボタン1 ボタン2 ボタン3

<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;
}

アイコン

ボタン1 ボタン2 ボタン3

<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;
}

ハイライト

ボタン1 ボタン2 ボタン3

<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;
}

アンダーライン

ボタン1 ボタン2 ボタン3

<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;
}

URLをコピーしました！