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

　　

相关博客链接 https://www.cnblogs.com/vivaxiaonan/p/9626958.html