碎碎念

轉自 https://wcc723.github.io/css/2013/10/07/css-chechbox/

--

CSS3 新增了:checked的偽元素，它可以判斷目前的checkbox 及 radio 是否有被選核，這樣html就能夠做出基本的點擊功能；並且結合label標籤，label標籤能夠讓樣式的套用更為自由，藉此增加畫面的豐富性。

Selector "~"

在介紹checked之前，先介紹另一個selector "~"，許多人應該都有用過"+"這一個selector，它的功能是選擇相鄰的下一個元素，而"~"的功能是選擇同層級的後方元素，下面來看個簡單範例。

//html code
<div class="demo1">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

//sass code
div
  &:hover
    background: orange
  &:hover ~ div
    background: #B0095C

它的功能就像上面所顯示一樣，可以選取後方複數以上的同層級元素，而在結合:hover等等偽元素，它能有更多的效果，而等等就會拿來結合:checked。

:checked

//html code
<input type="checkbox" id="a1">
<label for="a1"></label>

//sass code
[type="checkbox"]
  &:checked ~ label
    //當checkbox被選取時，改變label顏色
    background: #B0095C
    &:before          
      content: "Checkbox is checked."

上面有兩個元素，一個是checkbox，另一個是label，不管點哪一者都會得到一樣的結果，其原理是用 label for 對應checkbox的id，這樣兩者就會產生連動效果(html 的概念)；再利用CSS的選取器"~"改變label的樣式。

複數 label也可以執行

//html code
<input type="checkbox" id="a1">
<label for="a1"></label>
<label for="a1"></label>
<label for="a1"></label>

在html的規定id是不能夠重複的，但是label for是可以重複使用。

隱藏checkbox

  <input type="checkbox" id="a3">
  <label for="a3"></label>
  <div class="circles"></div>
  <div class="circles"></div>

//sass code
.demo3
  [type="checkbox"]
    display: none
    //隱藏checkbox
    &:checked + label
      background: #B0095C
      //當checkbox被選取時，和checkbox相鄰的 label改變顏色
      &:before          
        content: "Checkbox is checked."
      & ~ .circles
        //和checkbox同層的元素，開始進行animation
        animation: ifinityCircles 3s linear infinite
        -webkit-animation: ifinityCircles 3s linear infinite

剛剛有提到，label可以讓樣式設定更為容易，所以我們可以把checked隱藏起來，讓使用者只有看到label，這樣在畫面的設計上會更為自由。

而這互動效果，在後面的章節會有更豐富的運用，敬請期待!

--