checkbox radio 样式重写
checkbox 原生样式一般都不会使用，所以一般都要改写样式，今天记录一下改写的注意点
1.appearance
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;
这个是去除原生样式，加了前缀 兼容性比较差
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性。
| 值 | 描述 |
|---|---|
| normal | 将元素呈现为常规元素。 |
| icon | 将元素呈现为图标（小图片）。 |
| window | 将元素呈现为视口。 |
| button | 将元素呈现为按钮。 |
| menu | 将元素呈现为一套供用户选择的选项。 |
| field | 将元素呈现为输入字段。 |
2.重新渲染样式：
可以用背景图片、实体字符、图形变换等方式添加对勾样式，下面具体代码
可以直接使用的（移动端代码 ）
移动端代码
@fs2:0.0426rem; @fs1: 0.0213rem;
改写样式
input[type=checkbox]{
-webkit-appearance:none;
margin-top: 1*@fs1;
width: 17*@fs2;
height: 17*@fs2;
padding: 0;
border: 1px solid #a6a6a6;
position: relative;
border-radius: 0!important;
background: #969696;
&:before {
content: "";
position: absolute;
left: 6*@fs1;
top:6*@fs1;
width: 15*@fs1;
height: 8*@fs1;
border: 2px solid #fff;
border-radius: 1px;
border-top: none;
border-right: none;
background: transparent;
transform: rotate(-45deg);
z-index: 1;
}
}
input[type=checkbox]:checked{
width: 17*@fs2;
height: 17*@fs2;
background:#C62828 ;
border-color: #C62828;
}
pc端
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 12px;
position: relative;
text-align: center;
}
input[type=checkbox]:after {
position: absolute;
width: 15px;
height: 15px;
top: 0;
content: " ";
color: #fff;
display: inline-block;
visibility: visible;
padding: 0 2px;
border-radius: 3px;
background:#FFFFFF;
border:1px solid #DDDDDD;
}
input[type=checkbox]:checked:after {
content: "✓";
font-size: 12px;
font-weight: 600;
background-color: #C62828;
}
2020-05-07
radio 样式重写
移动端 （pc端类似）
input[type=radio]{width:50*@fs1;height: 50*@fs1;-webkit-appearance: none;background: transparent;border: 3*@fs1 solid #FFFFFF;border-radius: 100%;box-sizing: border-box;}
input[type=radio]:checked{
border-color: #D71B18;
position: relative;
}
input[type=radio]:checked:after{
content:'';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 28*@fs1;
height: 28*@fs1;
border-radius: 100%;
transform: translate(-50%,-50%);
background-color: #D71B18;
z-index: 1;
}
