HOME > CSS > ラジオボタンをgoogleフォームっぽくする

ラジオボタンをgoogleフォームっぽくする

googleフォームのラジオボタンは、見た目がオシャレで、チェックした時の反応も楽しい。ということで、フォームのラジオボタンをgoogleフォームっぽくする方法。

疑似要素とkeyframesを使ってcssだけで実装

まずhtml

<div class="formRadio">
    <input type="radio" name="s4" id="select1" value="1" checked="">
    <label for="select1">ラジオ1</label>
    <input type="radio" name="s4" id="select2" value="0">
    <label for="select2">ラジオ2</label>
    <input type="radio" name="s4" id="select3" value="0">
    <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}

実装

参考サイト