CSS魔法堂:改變單選框顏色就這麼吹毛求疵!
前言
是否曾經被業務提出"能改改這個單選框的顏色吧!讓它和主題顏色搭配一下吧!",然後苦於原生不支援換顏色,最後被迫自己手擼一個湊合使用。若拋開input[type=radio]
重新開發一個,發現要模擬選中、未選中、不可用等狀態很繁瑣,而涉及單選框組就更煩人了,其實我們可以通過label
、::before
、:checked
和tabindex
,然後外加少量JavaScript指令碼就能很好地模擬出一個樣式更豐富的“原生”單選框。下面我們一起來嘗試吧!
單選框瞭解一下
由於我們的目標是改變單選框顏色,其他外觀特徵和行為與原來的單選框一致,那麼我們就必須先了解單選框原來的外觀特徵和行為主要有哪些。 1.外觀特徵 1.1.常態樣式
margin: 3px 3px 0px 5px;
border: none 0;
padding: 0;
box-sizing: border-box;
display: inline-block;
line-height: normal;
position: static;
注意:外觀上我們必須要保證佈局特性和原生的一致,否則採用自定義單選框替換後很大機會會影響整體的佈局,最後導致被迫調整其他元素的佈局特性來達到整體的協調,從而擴大了修改範圍。
1.2.獲得焦點的樣式
outline-offset: 0px;
outline: -webkit-focu-ring-color auto 5px;
注意:這裡的獲取焦點的樣式僅通過鍵盤Tab
1.3.設定為disabled
的樣式
color: rgb(84, 84, 84);
2.行為特徵
單選框的行為特徵,明顯就是選中與否,及選中狀態的改變事件,因此我們必須保持對外提供change
事件。
另外值得注意的是,當通過鍵盤的Tab
鍵讓單選框獲得焦點後,再按下Space
鍵則會選中該單選框。
有了上述的瞭解,我們可以開始著手擼程式碼了!
少廢話,擼程式碼
上圖中左側就是原生單選框,右側為我們自定義的單選框。從上到下依次為未選中、選中、獲得焦點和disabled狀態的樣式。
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部分
<!-- 未選中狀態 -->
<label class="radio" tabindex="0">
<input type="radio" name="a">
<i class="radio__appearance"></i>
</label>
<br>
<!-- 選中狀態 -->
<label class="radio" tabindex="0">
<input type="radio" name="a" checked>
<i class="radio__appearance"></i>
</label>
<br>
<!-- disabled狀態 -->
<label class="radio">
<input type="radio" name="a" disabled>
<i class="radio__appearance"></i>
</label>
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`鍵執行選中操作
radio.addEventListener("keydown", e => {
if (e.keyCode === 32){
e.target.click()
}
})
})
這個實現有3個注意點:
- 通過
label
傳遞滑鼠點選事件到關聯的input[type=radio]
,因此可以安心隱藏單選框又可以利用單選框自身特性。但由於label
控制元件自身的限制,如預設不是可獲得焦點元素,因此無法傳遞鍵盤按鍵事件到單選框,即使新增tabindex
特性也需手寫JS來實現; - 當tabindex大於等於0時表示該元素可以獲得焦點,為0時表示根據元素所在位置安排獲得焦點的順序,而大於0則表示越小越先獲得焦點;
- 由於單選框的
display
為inline-block
,因此單選框將影響line box高度。當自定義單選框內元素採用inline-block
時,若vertical-align
設定稍有不慎就會導致內部元素所在的line box被撐高,從而導致自定義單選框所在的line box高度變大。因此這裡採用將內部元素的display
均設定為block
的做法,直接讓vertical-align
失效,提高可控性。
總結
對於複選框我們可以稍加修改就可以了,然後通過VUE、React等框架稍微封裝一下提供更簡約的API,使用起來就更方便了。 尊重原創,轉載請註明來自:https://www.cnblogs.com/fsjohnhuang/p/9741345.html ^_^肥仔John