卡卡網

本文介紹僅使用 HTML 和 CSS 創(chuàng)建自定義復選框，不顯示其原始圖像，但仍具有功能（選中 - 未選中）。

demodownload

HTML

<input 
  class="custom-checkbox" 
  id="myCheckbox" 
  type="checkbox" /> 
<label for="myCheckbox">
  復選框
</label>

該實例HTML使用了<input>與<label> id和for屬性連接的布局。

元素的順序很重要，因為 CSS 選擇器依賴于它。

隱藏input

.custom-checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

使用opacity: 0代替display: none重要的一點是，通過不透明度，我們可以獲得input元素的焦點狀態(tài)以進行樣式設置。

創(chuàng)建假復選框

.custom-checkbox + label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.custom-checkbox + label::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #c3c3c3;
  border-radius: 0.25em;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

 
自定義復選框

首先，我們使用align-items: center將標志與flex容器垂直對齊。

使用偽元素::before，我們可以模仿復選框。為了畫它的邊界。屬性background-repeat, -position 和 -size定義checked狀態(tài)中標志的位置。 

:checked 狀態(tài)下的偽元素樣式

.custom-checkbox:checked + label::before {
  border-color: blue;
  background-color: blue;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

 
:checked 狀態(tài)下的自定義復選框

:hover, :active, :focus 和 :disabled 狀態(tài)的樣式

.custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
  border-color: rgba(0, 0, 255, 0.33);
}
.custom-checkbox:not(:disabled):active + label::before {
  background-color: rgba(0, 0, 255, 0.66);
}
.custom-checkbox:focus + label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.125);
}
.custom-checkbox:focus:not(:checked) + label::before {
  border-color: #c3c3c3;
}
.custom-checkbox:disabled + label::before {
  background-color: black;
}

總結

本文介紹了一個僅用HTML和CSS創(chuàng)建復選框Checkbox的方法。偽元素是實現(xiàn)該控件的關鍵，因此需要了解偽元素的相關知識。

相關文章

• css實現(xiàn)漂亮的checkbox多選框和radio單選按鈕

標簽: 復選框  checkbox