国产成人黄色裸体视频,日本高清不卡中文字幕视频

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

如何僅使用HTML和CSS創(chuàng)建自定義單選框radio

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

在上一文中，我們介紹了純CSS創(chuàng)建自定義復(fù)選框Checkbox，在本文中，將介紹如何僅使用HTML和CSS創(chuàng)建自定義單選框radio。

如何僅使用HTML和CSS創(chuàng)建自定義單選框radio

HTML

<input class="custom-radio" name="color" type="radio" id="color-green" value="green">
<label for="color-green">Green</label>

HTML是由一個(gè)<input>和<label>標(biāo)簽組成。

隱藏input

因?yàn)槲覀円约簞?chuàng)建控件，所以要先隱藏原始控件。

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

opacity: 0 是透明度設(shè)置，0表示該元素是透明的，不可見的。

創(chuàng)建單選框radio

.custom-radio + label {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.custom-radio + label::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #adb5bd;
  border-radius: 50%;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

使用偽元素::before可以模仿創(chuàng)建出單選框radio。

:checked狀態(tài)下的單選框radio

.custom-radio:checked + label::before {
  border-color: #0b76ef;
  background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

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

.custom-radio:not(:disabled):not(:checked) + label:hover::before {
  border-color: #b3d7ff;
}

.custom-radio:not(:disabled):active + label::before {
  background-color: #b3d7ff;
  border-color: #b3d7ff;
}

.custom-radio:focus + label::before {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-radio:focus:not(:checked) + label::before {
  border-color: #80bdff;
}

.custom-radio:disabled + label::before {
  background-color: #e9ecef;
}