重寫checkbox的樣式
阿新 • • 發佈：2019-01-02
複選框作為網頁中比較常見的一個元件，有的時候我們需要對它進行美化，但是我們無法直接為其定義樣式，所以我們需要一些其它的辦法。
表單元素中有label 元素和 for屬性（id與for繫結），當我們點選label 標籤時，對應的表單元素就會有所反應。我們就是依據這個特性來實現的。
html:
<body>
<input type="checkbox" id="myCheck">
<label for="myCheck"></label>
</body>- 1
- 2
- 3
- 4
既然是自定義，我們就要把label 偽裝成複選框的樣子，比較常見的是方框狀，所以我們就有了如下的CSS樣式。
#myCheck + label{
background-color: white;
border-radius: 5px;
border:1px solid #d3d3d3;
width:20px;
height:20px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 20px;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
這樣我們就為label 元素定義為圓角的正方形邊框，然後就需要根據複選框的狀態進行相應的樣式調整。
#myCheck - 1
- 2
- 3
- 4
- 5
- 6
上述程式碼分別為label 元素定義了複選框選中狀態時應具有的樣式，比如背景色變灰、而且添加了“√”，\2714就是相應的編碼。
這樣我們就大功告成了，但是別忘了，我們要將自帶的checkbox 定義為display:none; 這樣就可以隱藏自帶的複選框了。