摘要:前言是否曾經(jīng)被業(yè)務(wù)提出能改改這個(gè)單選框的顏色吧讓它和主題顏色搭配一下吧,然后苦于原生不支持換顏色,最后被迫自己手?jǐn)]一個(gè)湊合使用。設(shè)置為的樣式行為特征單選框的行為特征,明顯就是選中與否,及選中狀態(tài)的改變事件,因此我們必須保持對(duì)外提供事件。
前言
?是否曾經(jīng)被業(yè)務(wù)提出"能改改這個(gè)單選框的顏色吧!讓它和主題顏色搭配一下吧!",然后苦于原生不支持換顏色,最后被迫自己手?jǐn)]一個(gè)湊合使用。若拋開(kāi)input[type=radio]重新開(kāi)發(fā)一個(gè),發(fā)現(xiàn)要模擬選中、未選中、不可用等狀態(tài)很繁瑣,而涉及單選框組就更煩人了,其實(shí)我們可以通過(guò)label、::before、:checked和tabindex,然后外加少量JavaScript腳本就能很好地模擬出一個(gè)樣式更豐富的“原生”單選框。下面我們一起來(lái)嘗試吧!
單選框了解一下?由于我們的目標(biāo)是改變單選框顏色,其他外觀(guān)特征和行為與原來(lái)的單選框一致,那么我們就必須先了解單選框原來(lái)的外觀(guān)特征和行為主要有哪些。
1.外觀(guān)特征
1.1.常態(tài)樣式
</>復(fù)制代碼
margin: 3px 3px 0px 5px;
border: none 0;
padding: 0;
box-sizing: border-box;
display: inline-block;
line-height: normal;
position: static;
注意:外觀(guān)上我們必須要保證布局特性和原生的一致,否則采用自定義單選框替換后很大機(jī)會(huì)會(huì)影響整體的布局,最后導(dǎo)致被迫調(diào)整其他元素的布局特性來(lái)達(dá)到整體的協(xié)調(diào),從而擴(kuò)大了修改范圍。
1.2.獲得焦點(diǎn)的樣式
</>復(fù)制代碼
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的樣式
</>復(fù)制代碼
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部分
</>復(fù)制代碼
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部分
</>復(fù)制代碼
JavaScript部分
</>復(fù)制代碼
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):
通過(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);
當(dāng)tabindex大于等于0時(shí)表示該元素可以獲得焦點(diǎn),為0時(shí)表示根據(jù)元素所在位置安排獲得焦點(diǎn)的順序,而大于0則表示越小越先獲得焦點(diǎn);
由于單選框的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)(2018/10/5追加)?上面我們通過(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部分
</>復(fù)制代碼
.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部分
</>復(fù)制代碼
JavaScript部分
</>復(fù)制代碼
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)
})
})
總結(jié)
?對(duì)于復(fù)選框我們可以稍加修改就可以了,然后通過(guò)VUE、React等框架稍微封裝一下提供更簡(jiǎn)約的API,使用起來(lái)就更方便了。
?尊重原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自:https://www.cnblogs.com/fsjoh... ^_^肥仔John
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/113963.html
摘要:真心沒(méi)法弄出圓角自從有了后,我們就可以通過(guò)制作圓角矩形圓形等圖形,甚至連也受到影響從而實(shí)現(xiàn)元素陰影也能做到圓角的效果。那么是否也能做出圓角的效果呢答案是否定的。 前言 ?在CSS魔法堂:改變單選框顏色就這么吹毛求疵!中我們要模擬原生單選框通過(guò)Tab鍵獲得焦點(diǎn)的效果,這里涉及到一個(gè)常常被忽略的屬性——outline,由于之前對(duì)其印象確實(shí)有些模糊,于是本文打算對(duì)其進(jìn)行稍微深入的研究^_^ ...
摘要:利用用和來(lái)做表單即時(shí)校驗(yàn)需求讓表單檢驗(yàn)變得簡(jiǎn)單優(yōu)雅,不需要寫(xiě)冗長(zhǎng)的代碼來(lái)校驗(yàn)設(shè)置樣式豐富了表單元素,提供了類(lèi)似等表單元素屬性。不知細(xì)葉誰(shuí)裁出,二月春風(fēng)似剪刀。首先,你需要先了解一下漸變的使用技巧。 之前不久,由于自己平時(shí)涉獵還算廣泛,總結(jié)了一篇博客:這些JavaScript編程黑科技,裝逼指南,高逼格代碼,讓你驚嘆不已,沒(méi)想到受到了大家的歡迎,有人希望能博主還能整理個(gè) CSS 的一些黑...
摘要:利用用和來(lái)做表單即時(shí)校驗(yàn)需求讓表單檢驗(yàn)變得簡(jiǎn)單優(yōu)雅,不需要寫(xiě)冗長(zhǎng)的代碼來(lái)校驗(yàn)設(shè)置樣式豐富了表單元素,提供了類(lèi)似等表單元素屬性。不知細(xì)葉誰(shuí)裁出,二月春風(fēng)似剪刀。首先,你需要先了解一下漸變的使用技巧。 之前不久,由于自己平時(shí)涉獵還算廣泛,總結(jié)了一篇博客:這些JavaScript編程黑科技,裝逼指南,高逼格代碼,讓你驚嘆不已,沒(méi)想到受到了大家的歡迎,有人希望能博主還能整理個(gè) CSS 的一些黑...
摘要:利用用和來(lái)做表單即時(shí)校驗(yàn)需求讓表單檢驗(yàn)變得簡(jiǎn)單優(yōu)雅,不需要寫(xiě)冗長(zhǎng)的代碼來(lái)校驗(yàn)設(shè)置樣式豐富了表單元素,提供了類(lèi)似等表單元素屬性。不知細(xì)葉誰(shuí)裁出,二月春風(fēng)似剪刀。首先,你需要先了解一下漸變的使用技巧。 之前不久,由于自己平時(shí)涉獵還算廣泛,總結(jié)了一篇博客:這些JavaScript編程黑科技,裝逼指南,高逼格代碼,讓你驚嘆不已,沒(méi)想到受到了大家的歡迎,有人希望能博主還能整理個(gè) CSS 的一些黑...
閱讀 1056·2021-11-18 10:02
閱讀 1313·2021-09-23 11:22
閱讀 2613·2021-08-21 14:08
閱讀 1642·2019-08-30 15:55
閱讀 1728·2019-08-30 13:45
閱讀 3164·2019-08-29 16:52
閱讀 3099·2019-08-29 12:18
閱讀 1642·2019-08-26 13:36