css如何改變單選框顏色

這篇文章將為大家詳細(xì)講解有關(guān)css如何改變單選框顏色，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

單選框了解一下

由于我們的目標(biāo)是改變單選框顏色，其他外觀特征和行為與原來(lái)的單選框一致，那么我們就必須先了解單選框原來(lái)的外觀特征和行為主要有哪些。
1.外觀特征
1.1.常態(tài)樣式

margin: 3px 3px 0px 5px;
border: none 0;
padding: 0;
box-sizing: border-box;
display: inline-block;
line-height: normal;
position: static;

注意：外觀上我們必須要保證布局特性和原生的一致，否則采用自定義單選框替換后很大機(jī)會(huì)會(huì)影響整體的布局，最后導(dǎo)致被迫調(diào)整其他元素的布局特性來(lái)達(dá)到整體的協(xié)調(diào)，從而擴(kuò)大了修改范圍。

1.2.獲得焦點(diǎn)的樣式

outline-offset: 0px;
outline: -webkit-focu-ring-color auto 5px;

注意：這里的獲取焦點(diǎn)的樣式僅通過(guò)鍵盤(pán)Tab鍵才生效，若通過(guò)鼠標(biāo)點(diǎn)擊雖然單選框已獲得焦點(diǎn)，但上述樣式并不會(huì)生效。

1.3.設(shè)置為disabled的樣式

color: rgb(84, 84, 84);

2.行為特征
?單選框的行為特征，明顯就是選中與否，及選中狀態(tài)的改變事件，因此我們必須保持對(duì)外提供change事件。
?另外值得注意的是，當(dāng)通過(guò)鍵盤(pán)的Tab鍵讓單選框獲得焦點(diǎn)后，再按下Space鍵則會(huì)選中該單選框。

?有了上述的了解，我們可以開(kāi)始著手?jǐn)]代碼了！

少?gòu)U話(huà)，擼代碼

上圖中左側(cè)就是原生單選框，右側(cè)為我們自定義的單選框。從上到下依次為未選中、選中、獲得焦點(diǎn)和disabled狀態(tài)的樣式。

CSS部分

label.radio {
  /* 保證布局特性保持一致 */
  margin: 3px 3px 0px 5px;
  display: inline-block;
  box-sizing: border-box;

  width: 12px;
  height: 12px;
}

.radio__appearance{
  display: block; /* 設(shè)置為block則不受vertical-align影響，從而不會(huì)意外影響到.radio的linebox高度 */
  position: relative;
  box-shadow: 0 0 0 1px tomato; /* box-shadow不像border那樣會(huì)影響盒子的框高 */
  border-radius: 50%;
  height: 90%;
  width: 90%;
  text-align: center;
}
label.radio [type=radio] + .radio__appearance::before{
  content: "";
  display: block;
  border-radius: 50%;
  width: 85%;
  height: 85%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: background .3s;
}
label.radio [type=radio]:checked + .radio__appearance::before{
  background: tomato;
}
label.radio [type=radio][disabled] + .radio__appearance{
  opacity: .5;
}
label.radio:focus{
  outline-offset: 0px;
  outline: #999 auto 5px;
}
/* 通過(guò)鼠標(biāo)單擊獲得焦點(diǎn)時(shí)，outline效果不生效 */
label.radio.clicked{
  outline: none 0;
}
/* 自定義單選框的行為主要是基于原生單選框的，因此先將原生單選框隱藏 */
label.radio input {
  display: none;
}

HTML部分

<!-- 未選中狀態(tài) -->
<label class="radio" tabindex="0">
  <input type="radio" name="a">
  <i class="radio__appearance"></i>
</label>

<br>

<!-- 選中狀態(tài) -->
<label class="radio" tabindex="0">
  <input type="radio" name="a" checked>
  <i class="radio__appearance"></i>
</label>

<br>

<!-- disabled狀態(tài) -->
<label class="radio">
  <input type="radio" name="a" disabled>
  <i class="radio__appearance"></i>
</label>

JavaScript部分

var radios = document.querySelectorAll(".radio")
radios.forEach(radio => {
  // 模擬鼠標(biāo)點(diǎn)擊后:focus樣式無(wú)效
  radio.addEventListener("mousedown", e => {
    var tar = e.currentTarget
    tar.classList.add("clicked")
    var fp = setInterval(function(){
      if (document.activeElement != tar){
        tar.classList.remove("clicked")
        clearInterval(fp)
      }
    }, 400)
  })
  // 模擬通過(guò)鍵盤(pán)獲得焦點(diǎn)后，按`Space`鍵執(zhí)行選中操作
  radio.addEventListener("keydown", e => {
    if (e.keyCode === 32){
      e.target.click()
    }
  })
})

這個(gè)實(shí)現(xiàn)有3個(gè)注意點(diǎn)：

1、通過(guò)label傳遞鼠標(biāo)點(diǎn)擊事件到關(guān)聯(lián)的input[type=radio]，因此可以安心隱藏單選框又可以利用單選框自身特性。但由于label控件自身的限制，如默認(rèn)不是可獲得焦點(diǎn)元素，因此無(wú)法傳遞鍵盤(pán)按鍵事件到單選框，即使添加tabindex特性也需手寫(xiě)JS來(lái)實(shí)現(xiàn)；

2、當(dāng)tabindex大于等于0時(shí)表示該元素可以獲得焦點(diǎn)，為0時(shí)表示根據(jù)元素所在位置安排獲得焦點(diǎn)的順序，而大于0則表示越小越先獲得焦點(diǎn)；

3、由于單選框的display為inline-block，因此單選框?qū)⒂绊憀ine box高度。當(dāng)自定義單選框內(nèi)元素采用inline-block時(shí)，若vertical-align設(shè)置稍有不慎就會(huì)導(dǎo)致內(nèi)部元素所在的line box被撐高，從而導(dǎo)致自定義單選框所在的line box高度變大。因此這里采用將內(nèi)部元素的display均設(shè)置為block的做法，直接讓vertical-align失效，提高可控性。

通過(guò)opacity:0實(shí)現(xiàn)

?上面我們通過(guò)label關(guān)聯(lián)display:none的input[type=radio]從而利用input[type=radio]簡(jiǎn)化自定義單選框的實(shí)現(xiàn)，但依然要手寫(xiě)JS實(shí)現(xiàn)按Space鍵選中的行為特征，有沒(méi)有另一種方式可以更省事呢？我們只是想讓用戶(hù)看不到原生單選框，那么直接設(shè)置為opacity:0不就可以了嗎？！

CSS部分

.radio {
  /* 保證布局特性保持一致 */
  margin: 3px 3px 0px 5px;
  display: inline-block;
  box-sizing: border-box;

  width: 13px;
  height: 13px;
}
/* 自定義單選框的行為主要是基于原生單選框的，因此先將原生單選框透明，且沾滿(mǎn)整個(gè)父元素 */
.radio input {
  opacity: 0;
  position: absolute;
  z-index: 1; /* 必須覆蓋在.radio__appearance上才能響應(yīng)鼠標(biāo)事件 */
  width: 100%;
  height: 100%;
}
.radio__container-box{
  position: relative;
  width: 100%;
  height: 100%;
}
.radio__appearance{
  display: block; /* 設(shè)置為block則不受vertical-align影響，從而不會(huì)意外影響到.radio的linebox高度 */
  position: relative;
  box-shadow: 0 0 0 1px tomato; /* box-shadow不像border那樣會(huì)影響盒子的框高 */
  border-radius: 50%;
  height: 90%;
  width: 90%;
  text-align: center;
}
.radio [type=radio] + .radio__appearance::before{
  content: "";
  display: block;
  border-radius: 50%;
  width: 85%;
  height: 85%;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  transition: background .3s;
}
.radio [type=radio]:checked + .radio__appearance::before{
  background: tomato;
}
.radio [type=radio][disabled] + .radio__appearance{
  opacity: .5;
}
.radio:focus-within .radio__appearance{
  outline-offset: 0px;
  outline: #999 auto 5px;
}
/* 通過(guò)鼠標(biāo)單擊獲得焦點(diǎn)時(shí)，outline效果不生效 */
.radio.clicked .radio_appearance{
  outline: none 0;
}

HTML部分

<!-- 未選中狀態(tài) -->
<span class="radio">
  <span class="radio__container-box">
    <input type="radio" name="a">
    <i class="radio__appearance"></i>
  </span>
</span>

<br>

<!-- 選中狀態(tài) -->
<span class="radio">
  <span class="radio__container-box">
    <input type="radio" name="a" checked>
    <i class="radio__appearance"></i>
  </span>
</span>

<br>

<!-- disabled狀態(tài) -->
<span class="radio">
  <span class="radio__container-box">
    <input type="radio" name="a" disabled>
    <i class="radio__appearance"></i>
  </span>
</span>

JavaScript部分

var radios = document.querySelectorAll(".radio")
radios.forEach(radio => {
  // 模擬鼠標(biāo)點(diǎn)擊后:focus樣式無(wú)效
  radio.addEventListener("mousedown", e => {
    var tar = e.currentTarget
    tar.classList.add("clicked")
    var fp = setInterval(function(){
      if (!tar.contains(document.activeElement){
        tar.classList.remove("clicked")
        clearInterval(fp)
      }
    }, 400)
  })
})

關(guān)于css如何改變單選框顏色就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。