CSS魔法堂：改變單選框顏色就這么吹毛求疵！

freecode 發(fā)布于2019-08-29 16:52 / 3230人閱讀

摘要：前言是否曾經(jīng)被業(yè)務提出能改改這個單選框的顏色吧讓它和主題顏色搭配一下吧，然后苦于原生不支持換顏色，最后被迫自己手擼一個湊合使用。設置為的樣式行為特征單選框的行為特征，明顯就是選中與否，及選中狀態(tài)的改變事件，因此我們必須保持對外提供事件。

前言

?是否曾經(jīng)被業(yè)務提出"能改改這個單選框的顏色吧！讓它和主題顏色搭配一下吧！"，然后苦于原生不支持換顏色，最后被迫自己手擼一個湊合使用。若拋開input[type=radio]重新開發(fā)一個，發(fā)現(xiàn)要模擬選中、未選中、不可用等狀態(tài)很繁瑣，而涉及單選框組就更煩人了，其實我們可以通過label、::before、:checked和tabindex，然后外加少量JavaScript腳本就能很好地模擬出一個樣式更豐富的“原生”單選框。下面我們一起來嘗試吧！

單選框了解一下

?由于我們的目標是改變單選框顏色，其他外觀特征和行為與原來的單選框一致，那么我們就必須先了解單選框原來的外觀特征和行為主要有哪些。
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;

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

1.2.獲得焦點的樣式

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

注意：這里的獲取焦點的樣式僅通過鍵盤Tab鍵才生效，若通過鼠標點擊雖然單選框已獲得焦點，但上述樣式并不會生效。

1.3.設置為disabled的樣式

color: rgb(84, 84, 84);

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

?有了上述的了解，我們可以開始著手擼代碼了！

少廢話，擼代碼

上圖中左側(cè)就是原生單選框，右側(cè)為我們自定義的單選框。從上到下依次為未選中、選中、獲得焦點和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; /* 設置為block則不受vertical-align影響，從而不會意外影響到.radio的linebox高度 */
  position: relative;
  box-shadow: 0 0 0 1px tomato; /* box-shadow不像border那樣會影響盒子的框高 */
  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;
}
/* 通過鼠標單擊獲得焦點時，outline效果不生效 */
label.radio.clicked{
  outline: none 0;
}
/* 自定義單選框的行為主要是基于原生單選框的，因此先將原生單選框隱藏 */
label.radio input {
  display: none;
}

HTML部分

JavaScript部分

var radios = document.querySelectorAll(".radio")
radios.forEach(radio => {
  // 模擬鼠標點擊后:focus樣式無效
  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)
  })
  // 模擬通過鍵盤獲得焦點后，按`Space`鍵執(zhí)行選中操作
  radio.addEventListener("keydown", e => {
    if (e.keyCode === 32){
      e.target.click()
    }
  })
})

這個實現(xiàn)有3個注意點：

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

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

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

通過opacity:0實現(xiàn)(2018/10/5追加)

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

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

  width: 13px;
  height: 13px;
}
/* 自定義單選框的行為主要是基于原生單選框的，因此先將原生單選框透明，且沾滿整個父元素 */
.radio input {
  opacity: 0;
  position: absolute;
  z-index: 1; /* 必須覆蓋在.radio__appearance上才能響應鼠標事件 */
  width: 100%;
  height: 100%;
}
.radio__container-box{
  position: relative;
  width: 100%;
  height: 100%;
}
.radio__appearance{
  display: block; /* 設置為block則不受vertical-align影響，從而不會意外影響到.radio的linebox高度 */
  position: relative;
  box-shadow: 0 0 0 1px tomato; /* box-shadow不像border那樣會影響盒子的框高 */
  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;
}
/* 通過鼠標單擊獲得焦點時，outline效果不生效 */
.radio.clicked .radio_appearance{
  outline: none 0;
}

HTML部分

JavaScript部分

var radios = document.querySelectorAll(".radio")
radios.forEach(radio => {
  // 模擬鼠標點擊后:focus樣式無效
  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)
  })
})

總結(jié)

?對于復選框我們可以稍加修改就可以了，然后通過VUE、React等框架稍微封裝一下提供更簡約的API，使用起來就更方便了。
?尊重原創(chuàng)，轉(zhuǎn)載請注明來自：https://www.cnblogs.com/fsjoh... ^_^肥仔John

GPU云服務器云服務器單選框 html打勾單選框 js單選框只讀 php 單選框取值

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113963.html

發(fā)表評論

登陸后可評論

0條評論

freecode

男|高級講師

我要關(guān)注我要私信

TA的文章

postman工具的入門使用,有她就夠了

閱讀 1089·2021-11-18 10:02
央視：蘋果產(chǎn)業(yè)鏈企業(yè)多領(lǐng)域布局，減輕“蘋果依賴癥”

閱讀 1333·2021-09-23 11:22
騰訊云秒殺：云服務器74元/年起,1C2G6M三年僅219元起

閱讀 2654·2021-08-21 14:08
如何優(yōu)雅地查看 JS 錯誤堆棧？

閱讀 1661·2019-08-30 15:55
輪播圖fade

閱讀 1747·2019-08-30 13:45
CSS魔法堂：改變單選框顏色就這么吹毛求疵！

閱讀 3231·2019-08-29 16:52
前端入門教程——純css制作二級菜單

閱讀 3117·2019-08-29 12:18
Fundebug前端JavaScript插件更新至1.7.1，拆分錄屏代碼，還原部分Script e

閱讀 1667·2019-08-26 13:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS魔法堂：改變單選框顏色就這么吹毛求疵！

相關(guān)文章

CSS魔法堂：那個被我們忽略的outline

CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅

CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅

CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優(yōu)雅

發(fā)表評論

0條評論

freecode

男|高級講師

TA的文章

postman工具的入門使用,有她就夠了

央視：蘋果產(chǎn)業(yè)鏈企業(yè)多領(lǐng)域布局，減輕“蘋果依賴癥”

騰訊云秒殺：云服務器74元/年起,1C2G6M三年僅219元起

如何優(yōu)雅地查看 JS 錯誤堆棧？

輪播圖fade