checkbox 样式重写 - 码农教程

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;

        }

原文地址：https://www.cnblogs.com/GoTing/p/11867890.html