溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“css怎么改變單選框的顏色”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
單選框了解一下
由于我們的目標(biāo)是改變單選框顏色，其他外觀特征和行為與原來的單選框一致，那么我們就必須先了解單選框原來的外觀特征和行為主要有哪些。
1.外觀特征
1.1.常態(tài)樣式
margin:3px3px0px5px;
border:none0;
padding:0;
box-sizing:border-box;
display:inline-block;
line-height:normal;
position:static;
注意：外觀上我們必須要保證布局特性和原生的一致，否則采用自定義單選框替換后很大機(jī)會(huì)會(huì)影響整體的布局，最后導(dǎo)致被迫調(diào)整其他元素的布局特性來達(dá)到整體的協(xié)調(diào)，從而擴(kuò)大了修改范圍。
1.2.獲得焦點(diǎn)的樣式
outline-offset:0px;
outline:-webkit-focu-ring-colorauto5px;
注意：這里的獲取焦點(diǎn)的樣式僅通過鍵盤Tab鍵才生效，若通過鼠標(biāo)點(diǎn)擊雖然單選框已獲得焦點(diǎn)，但上述樣式并不會(huì)生效。
1.3.設(shè)置為disabled的樣式
color:rgb(84,84,84);
2.行為特征
單選框的行為特征，明顯就是選中與否，及選中狀態(tài)的改變事件，因此我們必須保持對外提供change事件。
另外值得注意的是，當(dāng)通過鍵盤的Tab鍵讓單選框獲得焦點(diǎn)后，再按下Space鍵則會(huì)選中該單選框。
有了上述的了解，我們可以開始著手?jǐn)]代碼了！
少廢話，擼代碼
435275490-5bb54e2fc18b1_articlex.png
上圖中左側(cè)就是原生單選框，右側(cè)為我們自定義的單選框。從上到下依次為未選中、選中、獲得焦點(diǎn)和disabled狀態(tài)的樣式。
CSS部分
label.radio{
/*保證布局特性保持一致*/
margin:3px3px0px5px;
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:0001pxtomato;/*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:#999auto5px;
}
/*通過鼠標(biāo)單擊獲得焦點(diǎn)時(shí)，outline效果不生效*/
label.radio.clicked{
outline:none0;
}
/*自定義單選框的行為主要是基于原生單選框的，因此先將原生單選框隱藏*/
label.radioinput{
display:none;
}
HTML部分
<!--未選中狀態(tài)-->
<labelclass="radio"tabindex="0">
<inputtype="radio"name="a">
<iclass="radio__appearance"></i>
</label>
<br>
<!--選中狀態(tài)-->
<labelclass="radio"tabindex="0">
<inputtype="radio"name="a"checked>
<iclass="radio__appearance"></i>
</label>
<br>
<!--disabled狀態(tài)-->
<labelclass="radio">
<inputtype="radio"name="a"disabled>
<iclass="radio__appearance"></i>
</label>
JavaScript部分
varradios=document.querySelectorAll(".radio")
radios.forEach(radio=>{
//模擬鼠標(biāo)點(diǎn)擊后:focus樣式無效
radio.addEventListener("mousedown",e=>{
vartar=e.currentTarget
tar.classList.add("clicked")
varfp=setInterval(function(){
if(document.activeElement!=tar){
tar.classList.remove("clicked")
clearInterval(fp)
}
},400)
})
//模擬通過鍵盤獲得焦點(diǎn)后，按`Space`鍵執(zhí)行選中操作
radio.addEventListener("keydown",e=>{
if(e.keyCode===32){
e.target.click()
}
})
})
這個(gè)實(shí)現(xiàn)有3個(gè)注意點(diǎn)：
1、通過label傳遞鼠標(biāo)點(diǎn)擊事件到關(guān)聯(lián)的input[type=radio]，因此可以安心隱藏單選框又可以利用單選框自身特性。但由于label控件自身的限制，如默認(rèn)不是可獲得焦點(diǎn)元素，因此無法傳遞鍵盤按鍵事件到單選框，即使添加tabindex特性也需手寫JS來實(shí)現(xiàn)；
2、當(dāng)tabindex大于等于0時(shí)表示該元素可以獲得焦點(diǎn)，為0時(shí)表示根據(jù)元素所在位置安排獲得焦點(diǎn)的順序，而大于0則表示越小越先獲得焦點(diǎn)；
3、由于單選框的display為inline-block，因此單選框?qū)⒂绊憀inebox高度。當(dāng)自定義單選框內(nèi)元素采用inline-block時(shí)，若vertical-align設(shè)置稍有不慎就會(huì)導(dǎo)致內(nèi)部元素所在的linebox被撐高，從而導(dǎo)致自定義單選框所在的linebox高度變大。因此這里采用將內(nèi)部元素的display均設(shè)置為block的做法，直接讓vertical-align失效，提高可控性。
通過opacity:0實(shí)現(xiàn)
上面我們通過label關(guān)聯(lián)display:none的input[type=radio]從而利用input[type=radio]簡化自定義單選框的實(shí)現(xiàn)，但依然要手寫JS實(shí)現(xiàn)按Space鍵選中的行為特征，有沒有另一種方式可以更省事呢？我們只是想讓用戶看不到原生單選框，那么直接設(shè)置為opacity:0不就可以了嗎？！
CSS部分
.radio{
/*保證布局特性保持一致*/
margin:3px3px0px5px;
display:inline-block;
box-sizing:border-box;
width:13px;
height:13px;
}
/*自定義單選框的行為主要是基于原生單選框的，因此先將原生單選框透明，且沾滿整個(gè)父元素*/
.radioinput{
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:0001pxtomato;/*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:#999auto5px;
}
/*通過鼠標(biāo)單擊獲得焦點(diǎn)時(shí)，outline效果不生效*/
.radio.clicked.radio_appearance{
outline:none0;
}
HTML部分
<!--未選中狀態(tài)-->
<spanclass="radio">
<spanclass="radio__container-box">
<inputtype="radio"name="a">
<iclass="radio__appearance"></i>
</span>
</span>
<br>
<!--選中狀態(tài)-->
<spanclass="radio">
<spanclass="radio__container-box">
<inputtype="radio"name="a"checked>
<iclass="radio__appearance"></i>
</span>
</span>
<br>
<!--disabled狀態(tài)-->
<spanclass="radio">
<spanclass="radio__container-box">
<inputtype="radio"name="a"disabled>
<iclass="radio__appearance"></i>
</span>
</span>
JavaScript部分
varradios=document.querySelectorAll(".radio")
radios.forEach(radio=>{
//模擬鼠標(biāo)點(diǎn)擊后:focus樣式無效
radio.addEventListener("mousedown",e=>{
vartar=e.currentTarget
tar.classList.add("clicked")
varfp=setInterval(function(){
if(!tar.contains(document.activeElement){
tar.classList.remove("clicked")
clearInterval(fp)
}
},400)
})
})
“css怎么改變單選框的顏色”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
