ラジオボタンをスッキリ、シンプルなデザインにしたり、googleフォームのようにするための、HTMLとCSSのメモ。
ラジオボタンをシンプルなフラットでシンプルなデザインにする
フラットで1pxの単線だけのシンプルなラジオボタンです。
inputは見えなくして、labelに対して::beforeで〇をつけて、 チェックされたら::afterで●を追加するだけです。
それとこちらのHTMLはul組にしました（googleフォーム風のほうはdiv組）です。
HTML
<ul class="formRadioList"> <li><input type="radio" name="サンプル" value="ラジオボタンサンプル（１）" id="sample01"><label for="sample01">ラジオボタンサンプル（１）</label></li> <li><input type="radio" name="サンプル" value="ラジオボタンサンプル（２）" id="sample02"><label for="sample02">ラジオボタンサンプル（２）</label></li> <li><input type="radio" name="サンプル" value="ラジオボタンサンプル（３）" id="sample03"><label for="sample03">ラジオボタンサンプル（３）</label></li> </ul>
CSS
.formRadioList li {
position: relative;
display: inline-block;
}
.formRadioList input[type=radio] {
position: absolute;
visibility: hidden;
width: auto;
}
.formRadioList label {
position: relative;
margin-right: 20px;
font-size: 17px;
vertical-align: middle;
cursor: pointer;
}
.formRadioList label::before {
position: relative;
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
background: #fff;
border: 1px solid #9fa0a0;
box-sizing: border-box;
border-radius: 50%;
vertical-align: middle;
}
.formRadioList input[type=radio]:checked + label::before {
border: 1px solid #000;
}
.formRadioList input[type=radio]:checked + label::after {
position: absolute;
left: 5px;
top: 12px;
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
box-sizing: border-box;
vertical-align: middle;
}
実装
ラジオボタンをgoogleフォームっぽくする
googleフォームのラジオボタンは、見た目がオシャレで、チェックした時の反応も楽しい。ということで、フォームのラジオボタンをgoogleフォームっぽくする方法。
疑似要素とkeyframesを使ってcssだけで実装
まずhtml
<div class="formRadio">
<input type="radio" name="s4" id="select1" value="0" checked="">
<label for="select1">ラジオ１</label>
<input type="radio" name="s4" id="select2" value="1">
<label for="select2">ラジオ２</label>
<input type="radio" name="s4" id="select3" value="2">
<label for="select3">ラジオ３</label>
</div>
cssは疑似要素でおしゃれな見た目にして、keyframesを使ってチェックした時に弾けたような動きをつけます。
.formRadio input{
display: none;
}
.formRadio label{
display: inline-block;
position: relative;
cursor: pointer;
margin-left: 20px;
padding: 10px 20px;
border-radius: 2px;
color: #3e4956;
font-size: 14px;
text-align: center;
line-height: 1;
}
.formRadio label:before{
position: absolute;
content: "";
top: 50%;
left: -10px;
width: 20px;
height: 20px;
margin-top: -10px;
background: #bdc3c7;
border-radius: 50%;
}
.formRadio input[type="radio"]:checked + label:after {
position: absolute;
content: "";
top: 50%;
left: -4px;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 50%;
background: #AB2B19;
}
@-webkit-keyframes boom{0%{opacity:.2;-webkit-transform:scale(2);transform:scale(2)}90%{opacity:.01;-webkit-transform:scale(6);transform:scale(6)}100%{-webkit-transform:none;transform:none}}
@keyframes boom{0%{opacity:.2;-webkit-transform:scale(2);transform:scale(2)}90%{opacity:.01;-webkit-transform:scale(6);transform:scale(6)}100%{-webkit-transform:none;transform:none}}
.formRadio input[type="radio"]:checked + label:after{-webkit-animation:boom .2s ease-in;animation:boom .2s ease-in;-webkit-animation-iteration-count:1;animation-iteration-count:1}
