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

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

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

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

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

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

思路：

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

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

3. 最后把生成內容美化一下。

解決方法：

1. 一段簡單的結構代碼：

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

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

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;  /*行高不加單位，子元素將繼承數字乘以自身字體尺寸而非父元素行高*/
}

現在的樣子：

原來的復選框仍然可見，但是我們先給復選框的勾選狀態添加樣式：

3. 給復選框的勾選狀態添加不同的樣式：

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

現在的樣子：

4. 現在把原來的復選框隱藏：

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

現在的樣子：

隱藏原來的復選框時，如果使用 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;
}

點擊后，得到焦點，現在的樣子：

多選框外多出一層陰影。

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