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

現在的樣子：

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

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

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

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

現在的樣子：

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

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

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

現在的樣子：

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

隱藏原來的復選框時，如果使用 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"]的樣式