CSSを活用してinputのチェックボックスやラジオボタンを画像にする方法

Pocket

<div class="sample">
    <input name="s1" id="radio1" value="1" type="radio">
    <label for="select1">りんご</label>
</div>
.sample input{ display: none;}
.sample label{
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin-left: 20px;
    padding: 10px 20px;
    border-radius: 2px;
    font-size: 14px;
    text-align: center;
    line-height: 1;
}
.sample label:before{
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url('チェック前の画像');
}
.sample input[type="radio"]:checked + label:after {
    position: absolute;
    content: "";
    top: 50%;
    left: -10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: url('チェック後の画像');
}

あとはサイズや画像を指定すれば自由に作ることが出来ます。

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*