CSS模拟radio单选框check复选框

最新推荐文章于 2023-01-08 20:39:12 发布

weixin_33743880

最新推荐文章于 2023-01-08 20:39:12 发布

阅读量225

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3549294/blog/1476273

版权

2019独角兽企业重金招聘Python工程师标准>>>

html:

<div class="radio-checkbox-wrap">
        <label>
            <input type="radio" name="sex"><i></i>first
        </label>

        <label>
            <input type="radio" name="sex"><i></i>second
        </label>

        <label>
            <input type="radio" name="sex"><i></i>other
        </label>
    </div>

css:

 label{
            display: block;
            margin-bottom: 10px;
        }
        input{
            /*position: absolute; top: -9999px;*/
            display: none;opacity: 0;
        }
        i{
            display: inline-block;
            width: 17px; height: 17px;
            margin-right: 10px;
            background: url(radio_simulation.png) no-repeat;
            vertical-align: middle;
        }
        input:checked+i{
            background: url(radio_simulation_check.png) no-repeat;
        }

效果图：