<label class="my-radio">
<input type="radio" name="example" checked>
<span class="radio-mark"></span>
りんご
</label>
<label class="my-radio">
<input type="radio" name="example">
<span class="radio-mark"></span>
みかん
</label>
<label class="my-radio">
<input type="radio" name="example">
<span class="radio-mark"></span>
ぶどう
</label>
<!-- 分かりやすさのために属性は基本的に省略 -->
<!-- Code Kitchenのバナー -->
<a href="https://code-kitchen.dev/" style="display: table; position: fixed; bottom: 2px; right: 5px;" target="_blank"><img src="https://res.cloudinary.com/code-kitchen/image/upload/v1582096487/static/banner.svg" alt="Code Kitchen" width="110" height="30"></a>.my-radio {
position: relative;
display: block; /* 縦並びに */
margin: 0.5em 0; /* 前後のスペース */
padding-left: 28px;
cursor: pointer;
user-select: none;
/* inputは非表示にする */
input {
display: none;
}
}
/* 常に表示する円 */
.radio-mark {
position: absolute;
top: 0; /* 上からの位置 */
left: 0;
height: 22px; /* 幅 */
width: 22px; /* 幅 */
border: solid 2px #d4dae2; /* 線 */
border-radius: 50%;
box-sizing: border-box;
/* 選択時に重ねる円 */
&:after {
content: "";
position: absolute;
background: #2e80ff; /* 色 */
border-radius: 50%;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
opacity: 0; /* 透明にしておく */
}
}
/* 選択されたとき */
.my-radio {
/* 上の円 */
input:checked + .radio-mark:after {
opacity: 1; /* 透明を解除 */
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.