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: #e0ddd9;
	color: #a5aab2;
	font-size: 10pt;
	text-align: center;
	line-height: 1;
	transition: .2s;
}

.radio_ex label:first-of-type{
	border-radius: 5px 0 0 5px;
}
.radio_ex label:last-of-type{
	border-right: 0px;
	border-radius: 0 5px 5px 0;
}
.radio_ex input[type="radio"]:checked + label {
	background-color: #8dcf47;
	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>