上一篇提到了將input元素的type設(shè)置為radio時（也就是單選框）的自定義，那么將input元素的type為checkbox時，input的自定義顯示又將如何處理呢？系統(tǒng)默認的顯示方式是勾選，如果我們要達到手機設(shè)置界面開關(guān)按鈕的顯示效果，那該如何做到呢？這里為大家提供兩種通過CSS來實現(xiàn)的方法。
方法一：使用CSS3新屬性appearance
如果讀過上一篇關(guān)于CSS的文章，讀者可能會想到這里也可以使用<label>元素來實現(xiàn)相應(yīng)的自定義，但是在使用<label>之前這里先介紹一種利用CSS3新特性的一種實現(xiàn)方法，該方法是參考了騰訊公司微信應(yīng)用的推薦寫法。
CSS3添加了一個新屬性appearance，所有主流瀏覽器都不支持 appearance 屬性，但是Firefox 支持替代的 -moz-appearance 屬性，Safari 和 Chrome 支持替代的 -webkit-appearance 屬性。所以在手機瀏覽器上該屬性是都是適用的。將appearance屬性設(shè)置成“none”將會隱藏<input>的默認顯示樣式，但是邊框的改變和背景的改變依舊可以顯示出來。完整的實現(xiàn)代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
/*switch 按鈕*/
.switch-ui{
-webkit-appearance: none; /*隱藏默認的顯示樣式*/
-moz-appearance: none; /*隱藏默認的顯示樣式*/
appearance: none; /*隱藏默認的顯示樣式*/
/* 將<input>顯示的形狀變成橢圓*/
width: 44px;
height: 24px;
border-radius: 12px;
top: 3px;
position: relative;/*此處設(shè)置為relative便于后面的:after和:before通過設(shè)置position為absolute來改變相對位置*/
border: 1px solid #dfdfdf;
outline: 0;
box-sizing: border-box;
background: #dfdfdf;
}
.switch-ui:checked {
border-color: #12b7f5;
background-color: #12b7f5;
}
.switch-ui:after, .switch-ui:before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 22px;
border-radius: 11px;
/* transition 用來設(shè)置動畫的持續(xù)時間，這里的動畫類型是transform，即位置偏移動畫*/
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.switch-ui:before {
width: 42px;
}
.switch-ui:after {
width: 22px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
/*checked狀態(tài)下，:before大小變?yōu)?*/
.switch-ui:checked:before {
-webkit-transform: scale(0);
transform: scale(0);
}
/*checked狀態(tài)下，:after位置向右偏移20px*/
.switch-ui:checked:after {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
</style>
<title></title>
</head>
<body>
<div class="container">
<form>
<span class="">選項一</span><input type="checkbox" id="switch_1" name="mode" value = "0" class="switch-ui">
<span class="">選項二</span><input type="checkbox" id="switch_2" name="mode" value = "0" class="switch-ui">
</form>
</div>
</body>
</html>
（關(guān)鍵細節(jié)的一些說明，可以查看以上代碼中的注釋）
具體的顯示效果如下圖
方法二：使用<label>元素
雖然使用屬性appearance來實現(xiàn)<input>的自定義看上去的顯示已經(jīng)比較完美，但是這種方法其對瀏覽器的兼容性很不友好，尤其是IE瀏覽器包括edge瀏覽器都無法支持。為了提高兼容性，可以使用<label>方法來實現(xiàn)<input>顯示的自定義。
該方法與上一篇文章介紹的方法類似，原理都是基于<label>標簽存在的特性：當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。完整的實現(xiàn)代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style>
/*switch 按鈕*/
.switch-ui{
display: none;
}
.switch-ui+label{
display: inline-block;/*此處必須要加上這個設(shè)置，否則label的寬度顯示會有問題*/
/* 將<input>顯示的形狀變成橢圓*/
width: 44px;
height: 24px;
border-radius: 12px;
top: 3px;
position: relative;/*此處設(shè)置為relative便于后面的:after和:before通過設(shè)置position為absolute來改變 相對位置*/
border: 1px solid #dfdfdf;
outline: 0;
box-sizing: border-box;
background: #dfdfdf;
}
.switch-ui:checked +label{
border-color: #12b7f5;
background-color: #12b7f5;
}
.switch-ui+label:after {
width: 22px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.switch-ui+label:after, .switch-ui+label:before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 22px;
border-radius: 11px;
/* transition 用來設(shè)置動畫的持續(xù)時間，這里的動畫類型是transform，即位置偏移動畫*/
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s,-webkit-transform .3s;
}
.switch-ui+label:before {
width: 42px;
}
/*checked狀態(tài)下，:before大小變?yōu)?*/
.switch-ui:checked+label:before {
-webkit-transform: scale(0);
transform: scale(0);
}
/*checked狀態(tài)下，:after位置向右偏移20px*/
.switch-ui:checked+label:after {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
</style>
<title></title>
</head><body>
<div class="container">
<form>
<span class="">選項一</span><input type="checkbox" id="switch_1" value = "0" class="switch-ui" checked><label for="switch_1"></label>
<span class="">選項二</span><input type="checkbox" id="switch_2" value = "1" class="switch-ui"><label for="switch_2"></label>
</form></div>
</body>
</html>
從上面的代碼可以看出來，其實大部分CSS屬性的設(shè)置與第一種方法是一致的，只是CSS的選擇器有所更改，從“.switch-ui”變成了“.switch-ui+label”，而.switch-ui自己做了隱藏設(shè)置（“display: none; ”），讓<label> 代替<input>做顯示。
這里的按鈕的顯示風(fēng)格只是iOS手機上的switch控件的風(fēng)格，通過改變.switch-ui 的橢圓的大小以及:after 和:before的大小和位置也可以實現(xiàn)android手機的風(fēng)格，或者更換背景圖實現(xiàn)更多自定義的風(fēng)格。
