改变单选或者复选框的样式

原理是通过定位把以前的样式覆盖掉，就酱...

代码如下：

css

  .checkbox
        {
            position: relative;
            padding-left: 8px;
        }
        .checkbox:before{
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #999;
            border-radius: 50%;
            background: #fff;
            position: absolute;

        }
        input[type=checkbox]:checked:before{
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 100%;
            background: #999;
            position: absolute;
            top: 5px;
            left: 13px;
        }
        input[type=checkbox]{
            margin-right: 6px;
        }

html


<p>改变单选或者复选框的样式
    <label class="checkbox"><input name="1" type="checkbox">11</label>
    <label class="checkbox"><input name="1" type="checkbox" >22</label>
</p>

 

转载于:https://www.cnblogs.com/iriliguo/p/7082325.html