五月伊人网,视频播放在线观看精品视频,亚洲欧美日韩国产精品一区

技術(shù)頻道 - html技術(shù)

純CSS創(chuàng)建自定義復(fù)選框Checkbox

作者:admin 時(shí)間:2022-8-15 15:34:32 瀏覽:

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

純CSS創(chuàng)建自定義復(fù)選框Checkbox

HTML

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

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

元素的順序很重要，因?yàn)?CSS 選擇器依賴于它。

隱藏input

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

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

創(chuàng)建假復(fù)選框

.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%;
}

自定義復(fù)選框

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

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

: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)下的自定義復(fù)選框

: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;
}