CSS模擬美化checkbox核取方塊詳解

admin發表於2018-09-16
CSS

由於自帶的checkbox核取方塊不夠美觀，所以很多網站都需要模擬實現它。

下面就分享一段能夠實現此功能的程式碼例項，並詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.checkboxC3 {
  width: 14px;
  height: 14px;
  position: relative;
}
.checkboxC3 label {
  width: 14px;
  height: 14px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #eae9e9;
  border:1px solid #bfbebe;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.checkboxC3 label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 6px;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  background: transparent;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0;
}
.checkboxC3 input[type=checkbox] {
  visibility: hidden;
}
.checkboxC3 input[type=checkbox]:checked + label {
  border-color:transparent;
  background: #2196f3;
}
.checkboxC3 input[type=checkbox]:checked + label:after {            
  opacity:1;
}
</style>
</head>
<body>
<div class="checkboxC3">
  <input type="checkbox" id="remeber"> 
  <label for="remeber"></label>
</div>
</body>
</html>

上面的程式碼實現了模擬效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.checkboxC3 {
  width: 14px;
  height: 14px;
  position: relative;
}

設定模擬核取方塊的容器元素的樣式。

採用相對定位，那麼它內部的定位元素都是以它為參考物件。

[CSS] 純文字檢視 複製程式碼
.checkboxC3 label {
  width: 14px;
  height: 14px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: #eae9e9;
  border:1px solid #bfbebe;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

label元素和核取方塊相關聯。

預設狀態下我們看到的灰色核取方塊就是這個label元素。

將其設定為圓角狀態。

[CSS] 純文字檢視 複製程式碼
.checkboxC3 label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 6px;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  background: transparent;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0;
}

這個就是我們看到的對勾效果，預設它是完全透明的，我們看不到它。

關於對勾是如何實現可以參閱css3實現對勾效果程式碼例項一章節。

[CSS] 純文字檢視 複製程式碼
.checkboxC3 input[type=checkbox] {
  visibility: hidden;
}

核取方塊是隱藏狀態，label標籤採用絕對定位會覆蓋在它上面。

[CSS] 純文字檢視 複製程式碼
.checkboxC3 input[type=checkbox]:checked + label {
  border-color:transparent;
  background: #2196f3;
}

點選label標籤能夠選中核取方塊，這時候label的邊框設定為透明，背景色設定為藍色。

[CSS] 純文字檢視 複製程式碼
.checkboxC3 input[type=checkbox]:checked + label:after {            
  opacity:1;
}

核取方塊被選中的時候，偽元素設定為不透明，對勾就顯示出來。

二.相關閱讀:

（1）.border-radius可以參閱CSS3 border-radius一章節。

（2）.transform: rotate()可以參閱transform: rotate()一章節。

（3）.:after可以參閱CSS E:after/E::after一章節。

（4）.:checked選擇器可以參閱CSS E:checked一章節。

（5）.[type=checkbox]可以參閱CSS E[att="val"]一章節。

相關文章