纯css更改radio和checkbox的样式

      发布在:Notes, 前端技术      评论:0 条评论

先直接上代码:

input[type='checkbox']{
            background-color:rgba(0,0,0,0);
            -webkit-appearance : none ;
            border:1px solid black;
            width:2rem;
            height:2rem;
            border-radius: 50%;
            outline: none;
        }
        input[type='checkbox']:checked{
            -webkit-appearance : none ;
            background: url("yourbg") no-repeat center center;
            background-size:100%;
            outline: none;
            border:none;
        }

input[type='checkbox']{
            background-color:rgba(0,0,0,0);
            -webkit-appearance : none ;
            border:1px solid black;
            width:2rem;
            height:2rem;
            border-radius: 50%;
            outline: none;
        }
        input[type='checkbox']:checked{
            -webkit-appearance : none ;
            background: url("yourbg") no-repeat center center;
            background-size:100%;
            outline: none;
            border:none;
        }

样式从
纯css更改radio和checkbox的样式
变成了
纯css更改radio和checkbox的样式
这里最主要是
-webkit-appearance : none ;
清除了chrome内核的radio和checkbox默认样式
appearance总共有三个:

-webkit-appearance: value;
-moz-appearance: value;
appearance: value;

这样就可以更改了

Responses