デモ：
See the Pen
input radio button by Kurotan (@kurotan)
on CodePen.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<input type="radio" name="gender" value="male" id="gender-male" checked>
<label for="gender-male">男性</label>
<input type="radio" name="gender" value="female" id="gender-female">
<label for="gender-female">女性</label>input[name="gender"]{
display: none;
}
label{
margin-top:10px;
display:block;
border:3px solid #2f2f2f;
padding:10px;
cursor: pointer;
width:100px;;
text-align:center;
border-radius:10px;
}
input[name="gender"]:checked + label{
background-color:#2f2f2f;
color:#fff;
position:relative;
display: flex;
justify-content: center;
align-items: center;
}
input[name="gender"]:checked + label:before{
content: "\e5ca";
font-family: 'Material Icons';
position:absolute;
left:8px;
font-size:25px;
}formのコーディングをする機会があって、そこでradioのデザインはボタンっぽいほうがスマホでも押しやすくていいかなって思いコーディングしました。
inputのidとlabelのforで紐付けつつ、本体のradioはdisplay:noneで消すというのがキモのようです。
また、使う機会ありそうなので備忘録を兼ねて。
