Published on

纯css更改radio和checkbox的样式

Authors
  • avatar
    Name
    Hansuku
    Twitter

先直接上代码：

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;
        }

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

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

这样就可以更改了