WEBの便利ツール CSS クールなラジオボタン ジェネレーター

CSSコード

.radio_ex input{
	display: none;
}
.radio_ex label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 10px;
	padding: 10px 20px;
	color: #555555;
	font-size: 10pt;
	text-align: center;
	line-height: 1;
}
.radio_ex label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #d8783f;
	border-radius: 50%;
}
.radio_ex input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #efcab4;
	font-weight:bold;
}

HTMLコード

<form>
<div class="radio_ex">
    <input type="radio" name="s3" id="select_0" value="札幌" checked="checked" />
    <label for="select_0">札幌</label>
    <input type="radio" name="s3" id="select_1" value="東京" />
    <label for="select_1">東京</label>
    <input type="radio" name="s3" id="select_2" value="横浜" />
    <label for="select_2">横浜</label>
    <input type="radio" name="s3" id="select_3" value="京都" />
    <label for="select_3">京都</label>
</div>

<input type="submit" value="送信" />
</form>