HOME > CSS > ラジオボタンのデザイン&CSS

ラジオボタンのデザイン&CSS

ラジオボタンをスッキリ、シンプルなデザインにしたり、googleフォームのようにするための、HTMLとCSSのメモ。

ラジオボタンをシンプルなフラットでシンプルなデザインにする

フラットで1pxの単線だけのシンプルなラジオボタンです。

inputは見えなくして、labelに対して::beforeで〇をつけて、 チェックされたら::afterで●を追加するだけです。

それとこちらのHTMLはul組にしました(googleフォーム風のほうはdiv組)です。

HTML

<ul class="formRadioList">
<li><input type="radio" name="サンプル" value="ラジオボタンサンプル(1)" id="sample01"><label for="sample01">ラジオボタンサンプル(1)</label></li>
<li><input type="radio" name="サンプル" value="ラジオボタンサンプル(2)" id="sample02"><label for="sample02">ラジオボタンサンプル(2)</label></li>
<li><input type="radio" name="サンプル" value="ラジオボタンサンプル(3)" id="sample03"><label for="sample03">ラジオボタンサンプル(3)</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">ラジオ1</label>
    <input type="radio" name="s4" id="select2" value="1">
    <label for="select2">ラジオ2</label>
    <input type="radio" name="s4" id="select3" value="2">
    <label for="select3">ラジオ3</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}

実装

参考サイト