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

CSSコード

.radio_ex input{
	display: none;
}
.radio_ex label{
	display: block;
	float: left;
	cursor: pointer;
		width: 80px;
		margin: 0;
	padding: 12px 5px;
	border-right: 1px solid #abb2b7;
	background: #efcab4;
	color: #732d10;
	font-size: 10pt;
	text-align: center;
	line-height: 1;
	transition: .2s;
}

.radio_ex input[type="radio"]:checked + label {
	background-color: #d8783f;
	color: #fff;
	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>