樣式化複選框(Styling Checkbox)，stylingcheckbox

樣式化複選框(Styling Checkbox)，stylingcheckbox

複選框 Checkbox 是 Web 應用程式常用控制項，隨處可見，原生的複選框控制項一般就像下面這樣：

選中狀態 未選狀態

這取決於作業系統和瀏覽器，有些時候，這種樣子並不能滿足設計要求，這時需要更為精緻的複選框樣式。以往只有少數瀏覽器才支援對這類控制項應用樣式，比如拿到這樣一張設計圖：

 blue.png

在過去，想要通過簡單地修改樣式達成這種設計效果根本不行，不過，現在藉助強大的 CSS3 屬性 appearance 可以對該類控制項有空前的樣式控制能力：

input[type="checkbox"] {  -webkit-appearance: none;}

這樣設定該屬性值為 none 就去掉了複選框原有的呈現方式，變成了一個普普通通的元素，然後就可以為之應用樣式了，添加如下樣式：

input[type="checkbox"] {  -webkit-appearance: none;  background: #fff url(i/blue.png);  height: 22px;  vertical-align: middle;  width: 22px;}

通過結合使用狀態偽類別選取器 :checked 可以為選中狀態下的 checkbox 設定不同的樣式，用以從視覺上區別：

input[type="checkbox"]:checked {  background-position: -48px 0;}

此時點擊複選框，可以看到複選框樣式的變化效果，另外，根據那張設計圖片所示還得加上擷取焦點，禁用等狀態的樣式：

input[type="checkbox"]:focus,input[type="checkbox"]:hover {  background-position: -24px 0;  outline: none;}input[type="checkbox"]:checked {  background-position: -48px 0;}input[type="checkbox"][disabled] {  background-position: -72px 0;}input[type="checkbox"][disabled]:checked {  background-position: -96px 0;}

因為圖片已經事先合并成一張了，簡單修改一下 background-position 就可以了，同時前面幾個選取器的優先順序（權重）一樣，所以書寫順序很重要。

相容性

目前只相容 Webkit 系列瀏覽器；雖然 Firefox 也實現了替代的 -moz-appearance 屬性，不過控制項原有的背景顏色、邊框樣式無法修改，暫時也不大好用；IE 系列暫時不支援該屬性，更詳細的相容情況查看 Caniuse/appearance。因此需要為 IE 瀏覽器清除掉背景圖片的影響：

input[type="checkbox"] {  background: #fff url(i/blue.png);  background: none\0;  *background: none;  ...}

為了相容更多的主流瀏覽器，需要尋求另外的解決方案，在所有主流瀏覽器裡，點擊關聯某個複選框的 label 時，產生的效果和點擊元素自身相同，會切換複選框控制項的選中狀態。瀏覽器的這種行為給了我們一個至關重要的掛鈎，既然能依靠 label 元素來控制原生複選框的狀態，那麼就可以不必直接操作實際的複選框元素，而把操作和樣式都轉移到與之關聯的 label 元素上去：

<input id="example" type="checkbox"><label for="example"></label>

確保 label 元素的 for 屬性的值和複選框 input 的 id 值一致，同時將 label 元素放置於 input 之後，這樣 CSS 可以通過相鄰兄弟選取器（Adjacent sibling selector）定位到這個 label 元素並為之應用樣式：

input[type="checkbox"] + label:before {  background: #fff url(i/blue.png);  content: " ";  height: 22px;  left: 0;  position: absolute;  width: 22px;}

有了樣式化的 label 元素來提供互動，原生的 checkbox 控制項就顯得有點多餘了，雖然可以用 display: none 把它隱藏掉，不過隱藏後的表單元素是不能獲得焦點的，所以最好的方式還是用 label 元素把它遮住，這樣既能支援鍵盤互動，同時當圖片載入失敗的時候，又能保證原生的控制項可用：

input[type="checkbox"] {  box-sizing: border-box;  left: 4px;  margin: 0;  padding: 0;  position: absolute;  top: 3px;}

圖片要足夠大能將原生的 checkbox 控制項完全遮擋住，因為這裡用到了絕對位置，所以需要增加一個定位參照：

<!-- HTML --><div class="checkbox">  <input id="exampleCheckbox" type="checkbox">  <label for="exampleCheckbox"></label></div>/* CSS */.checkbox {  min-height: 24px;  padding-left: 24px;  position: relative;}

左邊預留內邊距是為了排版更美觀，同時，和之前一樣，搭配上其它狀態下的樣式：

input[type="checkbox"]:focus + label:before,input[type="checkbox"] + label:hover:before {  background-position: -24px 0;}input[type="checkbox"]:checked + label:before {  background-position: -48px 0;}input[type="checkbox"][disabled] + label:before {  background-position: -72px 0;}input[type="checkbox"][disabled]:checked + label:before {  background-position: -96px 0;}

相容性

只要支援 CSS3 selectors 的瀏覽器基本上都能相容，同時具備原生控制項的絕大多數互動特性。IE 8 不支援 :checked 偽類別選取器，將虛擬元素 :before 修改為雙冒號 ::before 可以去掉對 IE 8 的影響：

input[type="checkbox"] + label::before { ... }

關於虛擬元素產生內容的相容性見 CSS Generated content for pseudo-elements。誠然，上面的方法假設了支援 :checked 偽類別選取器的瀏覽器同時也支援雙冒號虛擬元素寫法，而不支援的瀏覽器則都不支援，這是一種不太好的方式，這種假設事實上也是不正確的，造成了部分老舊瀏覽器停用問題，如果使用 :not() 選取器則更為合理，使用 :not(:checked) 來為未選中的控制項添加樣式，:not() 和 :checked 同屬一個規範 css3-selectors，相容性應該一致 CSS3 selectors。不過寫法有點變化，:checked 和 :not(:checked) 都需要添加上基本的樣式：

input[type="checkbox"]:checked + label:before,input[type="checkbox"]:not(:checked) + label:before {  background: #fff url(i/blue.png);  content: " ";  height: 22px;  left: 0;  position: absolute;  width: 22px;}input[type="checkbox"]:not(:checked):focus + label:before,input[type="checkbox"]:not(:checked) + label:hover:before {  background-position: -24px 0;}input[type="checkbox"]:checked + label:before {  background-position: -48px 0;}input[type="checkbox"][disabled]:not(:checked) + label:before {  background-position: -72px 0;}input[type="checkbox"][disabled]:checked + label:before {  background-position: -96px 0;}

查看簡單樣本，對於那些並不支援 :checked 偽類別選取器的瀏覽器（比如 IE 8），則可以藉助 javaScript 來根據控制項狀態修改真正的 class 屬性達到區分不同狀態的目的，比如根據是否被選中來添加或刪除一個 checked 的 class：

// jQuery$('input[type="checkbox"]').on('change', function() {  $(this)[$(this).prop('checked') ? 'addClass' : 'removeClass']('checked');});/* CSS */input[type="checkbox"].checked + label:before { ... }

有了前面的基礎，要製作類似於開關按鈕的控制項也是非常簡單的了，還是熟悉的結構：

<div class="checkbox">  <input id="example" type="checkbox">  <label for="example">Check</label></div>

首先勾勒出開關的形狀，一個圓角矩形中間放一個圓形按鈕：

input[type="checkbox"]:checked + label,input[type="checkbox"]:not(:checked) + label {  background-color: #e0e0e0;  border-radius: 24px;  cursor: pointer;  display: inline-block;  height: 24px;  position: relative;  text-indent: -9999px;  width: 48px;}input[type="checkbox"]:checked + label:after,input[type="checkbox"]:not(:checked) + label:after {  background-color: #fff;  border-radius: 20px;  content: " ";  height: 20px;  left: 2px;  position: absolute;  top: 2px;  width: 20px;}

選中的效果只要簡單修改下外框的背景色和中間按鈕的位置就行：

input[type="checkbox"]:checked + label {  background-color: #8c8;}input[type="checkbox"]:checked + label:after {  left: 26px;}

不過這種跳躍式變化實在是太生硬了，添加點過渡效果，看上去更平滑：

input[type="checkbox"]:checked + label,input[type="checkbox"]:not(:checked) + label {  -webkit-transition: background-color 0.3s;          transition: background-color 0.3s;}input[type="checkbox"]:checked + label:after,input[type="checkbox"]:not(:checked) + label:after {  -webkit-transition: left 0.3s;          transition: left 0.3s;}

點擊就能看到效果，對於中間的按鈕部分使用 CSS3 Transforms 來替代 left 效果更好，速度更快：

input[type="checkbox"]:checked + label:after,input[type="checkbox"]:not(:checked) + label:after {  -webkit-transition: left -webkit-transform 0.3s;       -o-transition:           -o-transform 0.3s;          transition: left         transform 0.3s;}input[type="checkbox"]:checked + label:after {  left: 26px;  -webkit-transform: translateX(24px);      -ms-transform: translateX(24px);       -o-transform: translateX(24px);          transform: translateX(24px);}

不支援 CSS3 Transforms 的瀏覽器仍然可以看到背景色的變化，不影響可用性，詳見 CSS3 Transforms。關於效能問題，請參考 High Performance Animations。快速點擊“控制項”會因選中效果造成不能切換狀態的情況，所以去掉“控制項”可以被選中的能力：

input[type="checkbox"]:checked + label,input[type="checkbox"]:not(:checked) + label {  (-prefix-)user-select: none;}

這裡的瀏覽器廠商首碼根據需要替換成相應的，查看簡單樣本。當然還需要提供聚焦以及禁用等狀態的樣式，就不在這裡重複了。以上所有技術可同時適用於單選框(radio)。

複選框Checkbox的樣式怎重寫？

<P><input type="checkbox" name="C1" value="ON">vb acript</P>
 
對於checkbox複選框的問題

<html>
<script>
window.onload = function(){
var ckb = document.getElementsByName("ckb");//change the name of checkbox
for(var i=0;i<ckb.length;i++){
ckb[i].onclick = function(){
if(this.checked == true){
for(var j=0;j<ckb.length;j++){
if(this.id == ckb[j].id){
ckb[j].disabled = true;
}
}
this.disabled = false;
}else{
for(var j=0;j<ckb.length;j++){
if(this.id == ckb[j].id){
ckb[j].disabled = false;
}
}
this.disabled = false;
}
}
}
}
</script>
<body>
<input type="checkbox" name="ckb" id="same" value=1/>1
<input type="checkbox" name="ckb" id="same" value=2/>2
<input type="checkbox" name="ckb" value=3/>3
<input type="checkbox" name="ckb" id="same" value=4/>4
<input type="checkbox" name="ckb" value=5/>5
<input type="checkbox" name="ckb" id="same" value=6/>6
<input type="checkbox" name="ckb" value=7/>7
</body>
</html>