ラジオボタンをカスタマイズの例

.ragio_custom input{
    display: none;
}
.ragio_custom 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;
}
.ragio_custom label:before{
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #e2e2e2;
    border:1px solid #999;
    border-radius: 50%;
}
.ragio_custom input[type="radio"]:checked + label:after {
    position: absolute;
    content: "";
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #e82c83;
}
<div class="ragio_custom">
	<input type="radio" name="radio1" id="select1" value="1" checked=""><label for="select1"><img src="images/plan/1.jpg" class="radio_img" alt="選択肢1"/></label>
	<input type="radio" name="radio1" id="select2" value="2"><label for="select2"><img src="images/plan/2.jpg" class="radio_img" alt="選択肢2"/></label>
	<input type="radio" name="radio1" id="select3" value="3"><label for="select3"><img src="images/plan/3.jpg" class="radio_img"  alt="選択肢3"/></label>
	<input type="radio" name="radio1" id="select4" value="4"><label for="select4"><img src="images/plan/4.jpg" class="radio_img" alt="選択肢4"/></label>
</div> 

ラジオボタン 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA