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