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

このエントリーをはてなブックマークに追加

クールなラジオボタン生成ツール

▼生成したラジオボタン


生成したソースを表示 生成結果のURL

CSSコード

.radio_ex input{
	display: none;
}
.radio_ex label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 10px;
	padding: 10px 20px;
	color: #191620;
	font-size: 13pt;
	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: #92b7f0;
	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: #362a90;
	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>
    <input type="radio" name="s3" id="select_4" value="������" />
    <label for="select_4">������</label>
</div>

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

▼以下を設定して下さい。

サンプル   サンプル   サンプル  

設定