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

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

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

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

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

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

思路：

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

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

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

解決方法：

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

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

2. 生成一個偽元素，作為美化版的復(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)在的樣子：

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

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

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

現(xiàn)在的樣子：

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

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

現(xiàn)在的樣子：

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

延伸

在聚焦和禁用時改變它的樣式：

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;
}

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

多選框外多出一層陰影。

感謝你能夠認真閱讀完這篇文章，希望小編分享怎么修改input中[type="checkbox"]的樣式內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!