怎么修改input中[type="checkbox"]的樣式

這篇文章主要介紹了怎么修改input中[type="checkbox"]的樣式，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專(zhuān)家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷(xiāo)，專(zhuān)業(yè)領(lǐng)域包括做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、電商網(wǎng)站制作開(kāi)發(fā)、小程序制作、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開(kāi)發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷(xiāo)的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶(hù)提供全方位的互聯(lián)網(wǎng)品牌整合方案！

                                                           有時(shí)候，HTML中的默認(rèn)樣式并不能滿(mǎn)足我們的審美，我們想把它修改成自己喜歡的樣式，那怎么辦呢？接下來(lái)，這篇文章就和大家聊聊如何修改input中[type="checkbox"]的樣式，需要的小伙伴可以參考一下。

對(duì)復(fù)選框自定義樣式，我們以前一直用的腳本來(lái)實(shí)現(xiàn)，不過(guò)現(xiàn)在可以使用新的偽類(lèi) :checkbox 來(lái)實(shí)現(xiàn)。

如果直接對(duì)復(fù)選框設(shè)置樣式，那么這個(gè)偽類(lèi)并不實(shí)用，因?yàn)闆](méi)有多少樣式能夠?qū)?fù)選框起作用。不過(guò)，倒是可以基于復(fù)選框的勾選狀態(tài)借助組合選擇符來(lái)給其他元素設(shè)置樣式。

很多時(shí)候，無(wú)論是為了表單元素統(tǒng)一，還是為了用戶(hù)體驗(yàn)良好，我們都會(huì)選擇 label 元素和 input[type="checkbox"] 一起使用。當(dāng)<label>元素與復(fù)選框關(guān)聯(lián)之后，也可以起到觸發(fā)開(kāi)關(guān)的作用。

思路：

1. 可以為<label>元素添加生成性?xún)?nèi)容(偽元素)，并基于復(fù)選框的狀態(tài)來(lái)為其設(shè)置樣式；

2. 然后把真正的復(fù)選框隱藏起來(lái)；

3. 最后把生成內(nèi)容美化一下。

解決方法：

1. 一段簡(jiǎn)單的結(jié)構(gòu)代碼：

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>

2. 生成一個(gè)偽元素，作為美化版的復(fù)選框，先給偽元素添加一些樣式：

input[type="checkbox"] + label::before {
    content: "\a0";  /*不換行空格*/
    display: inline-block;
    vertical-align: .2em;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background-color: silver;
    text-indent: .15em;
    line-height: .65;  /*行高不加單位，子元素將繼承數(shù)字乘以自身字體尺寸而非父元素行高*/
}

現(xiàn)在的樣子：

原來(lái)的復(fù)選框仍然可見(jiàn)，但是我們先給復(fù)選框的勾選狀態(tài)添加樣式：

3. 給復(fù)選框的勾選狀態(tài)添加不同的樣式：

input[type="checkbox"]:checked + label::before {
    content: "\2713";
    background-color: yellowgreen;
}

現(xiàn)在的樣子：

4. 現(xiàn)在把原來(lái)的復(fù)選框隱藏：

input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

現(xiàn)在的樣子：

隱藏原來(lái)的復(fù)選框時(shí)，如果使用 display: none; 的話(huà)，那樣會(huì)把它從鍵盤(pán) tab 鍵切換焦點(diǎn)的隊(duì)列中完全刪除。
于是可采用剪切的方式，讓剪切后的尺寸為零，這樣就隱藏了原來(lái)的多選框。

延伸

在聚焦和禁用時(shí)改變它的樣式：

input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
    background-color: gray;
    box-shadow: none;
    color: #555;
}

點(diǎn)擊后，得到焦點(diǎn)，現(xiàn)在的樣子：

多選框外多出一層陰影。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享怎么修改input中[type="checkbox"]的樣式內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)站欄目：怎么修改input中[type="checkbox"]的樣式
瀏覽地址：http://bm7419.com/article38/jdsopp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、服務(wù)器托管、網(wǎng)站制作、建站公司、ChatGPT、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)