CSS效果篇--純CSS+HTML實現checkbox的思路與實例

checkbox應該是一個比較經常使用的html功能了，不過瀏覽器自帶的checkbox每每樣式不怎麼好看，並且不一樣瀏覽器效果也不同。出於美化和統一視覺效果的需求，checkbox的自定義就被提出來了。這裏對實現方法作個總結。

實現思路

純css實現的主要手段是利用label標籤的模擬功能。label的for屬性能夠關聯一個具體的input元素，即便這個input自己不可被用戶可見，有個與它對應的label後，用戶能夠直接經過和label標籤交互來替代原生的input——而這給咱們的樣式模擬留下了空間。簡而言之就是:

隱藏原生 input，樣式定義的過程留給 label （那爲何不直接改變 checkbox的樣式？由於checkbox做爲瀏覽器默認組件，樣式更改上並無label那麼方便，不少屬性對 checkbox都是不起做用的，好比 background,而 label在樣式上基本和 div同樣'任人宰割')

而在選擇事件上，因爲css的「相鄰選擇符(E+F)」的存在，讓咱們能夠直接利用html的默認checkbox，免去了js模擬選擇的麻煩。

demo詳解

DEMO的部分CSS3屬性只寫了webkit前綴，因此建議用webkit內核的瀏覽器查看本頁
HTML代碼：

<!-- input的id必須有，這個是label進行元素匹配所必需的 -->
 <!-- 能夠看到每一個input的id和label的「for」屬性對應同一字符串 -->
<input type="checkbox" id="checkbox01" />
<label for="checkbox01"></label>

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

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

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

HTML構建完成，接下來是對應的css:

/* 隱藏全部checkbox */
input[type='checkbox'] {
  display: none;
}

/* 對label進行模擬.背景圖片隨便拼湊的，不要吐槽品味*/
/*   transition效果是作個背景切換效果，這裏單純演示而已，實際上這個過渡不加更天然*/
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  background: url(//www.chitanda.me/images/blank.png);
  background-position: 0 0px;
  -webkit-transition: background 0.5s linear;
}

/*  利用相鄰選擇符和checkbox`:checked`的狀態僞類來模擬默認選中效果（就是點擊後那個勾號的效果）  */
/*若是這段代碼註釋，點擊後將沒有任何反饋給用戶*/
/*由於label自己是沒有點擊後被選中的狀態的，checkbox被隱藏後，這個狀態只能手動模擬*/
input[type='checkbox']:checked+label {
  background-position: 0 -60px;
}

上面代碼的效果以下所示，看起來好像也能夠了。

不過仔細想一想，貌似缺了點什麼：選項對應的提示文字

對css不瞭解的新人可能這時候第一反應就是在label後面用p標籤或者span標籤來添加文字。不過這種方式都不怎麼優雅。我的建議用css的::before和::after僞元素（::before和:before是一個東西。不過爲了把「僞元素」和「僞類」區分出來，W3C建議的寫法是僞元素用::而僞類用:）

/* 僞元素的生效很簡單，定義`content`就好，其他的屬性和普通div同樣 */
label::after {
   content: attr(data-name);
   /*利用attr能夠減小css代碼量,data-name寫在html部分的label屬性裏*/
  display: inline-block;
  position: relative;
  width: 120px;
  height: 60px;
  left: 100%;
  vertical-align: middle;
  margin: 10px;
}

固然既然能夠用::after模擬label的文字，那也就能夠用::before模擬label的checkbox樣式，這裏就不作解析了。

這裏提一下僞類和僞元素的區分：

1）僞類：存在的意義是爲了經過選擇器找到那些不存在於DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。 僞類由一個冒號:開頭，冒號後面是僞類的名稱和包含在圓括號中的可選參數。

經常使用的僞類：

:active 向被激活的元素添加樣式。 
:focus 向擁有鍵盤輸入焦點的元素添加樣式。 
:hover 當鼠標懸浮在元素上方時，向元素添加樣式。 
:link 向未被訪問的連接添加樣式。 
:visited 向已被訪問的連接添加樣式。 
:first-child 向元素的第一個子元素添加樣式。 
:checked 向選中的控件元素添加樣式

2）僞元素:僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文檔語言裏的（能夠理解爲html源碼）；

注意: css3爲了區分僞類和僞元素，規定僞類前面有一個冒號，僞元素前面有兩個冒號

經常使用僞元素:

::before 爲做用元素的第一個子節點插入dom中
::after 爲做用元素的最後一個子節點插入dom中

• 同：都是經過選擇器爲元素添加樣式
• 異：僞元素會建立一個元素，但不是真正的Html元素，僞類至關於爲一個元素建立一個class樣式

實例：自定義radio

html代碼：

<input type="radio" id="radio">
<label for="radio"></label>

css代碼：

input{
    display:none;
}
label {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    border-radius: 50%;
    position: relative;
}
label::after {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-top:-8px;
    margin-left:-8px;
    z-index: 1;
    content: '';
    border:1px solid #333;
}

input:checked+label::after{
    background:red;
}

實現效果：
點擊前：

點擊後：

實例：自定義checkbox

html代碼：

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

css代碼：

input{
    display:none;
}
label {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #333;
    position: relative;
}
label::after {
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    -ms-transition: opacity .5s ease;
    transition: opacity .5s ease;
    cursor: pointer;
    position: absolute;
    content: '';
    opacity: 0;
}

input:checked+label::after{
    border: 2px solid #d73d32;
     border-top: none;
     border-right: none;
     -webkit-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
     width:20px;
     height:10px;
     top:50%;
     margin-top:-8px;
     left:50%;
     margin-left:-10px;
     opacity: 1.0;
}

實現效果：
點擊前：點擊後：

樣式中用到了css3選擇器，想詳情瞭解，可查看:《CSS基礎篇--CSS3屬性選擇器與(:not)選擇器》

參考地址：https://segmentfault.com/a/11...