自定義複選框checkbox樣式

時間 2019-11-21

原文原文鏈接

複選框做爲網頁中比較常見的一個組件，有的時候咱們須要對它進行美化，可是咱們沒法直接爲其定義樣式，因此咱們須要一些其它的辦法。html

表單元素中有label 元素和 for屬性，當咱們點擊label 標籤時，對應的表單元素就會有所反應。咱們就是依據這個特性來實現的。編碼

html:3d

<body>
    <input type="checkbox" id="myCheck">
    <label for="myCheck"></label>
</body>

既然是自定義，咱們就要把label 假裝成複選框的樣子，比較常見的是方框狀，因此咱們就有了以下的CSS樣式。code

#myCheck + label{
    background-color: white;
    border-radius: 5px;
    border:1px solid #d3d3d3;
    width:20px;
    height:20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}

這樣咱們就爲label 元素定義爲圓角的正方形邊框，而後就須要根據複選框的狀態進行相應的樣式調整。htm

#myCheck:checked + label{
    background-color: #eee;
}
#myCheck:checked + label:after{
    content:"\2714";
}

上述代碼分別爲label 元素定義了複選框選中狀態時應具備的樣式，好比背景色變灰、並且添加了「√」，\2714就是相應的編碼。blog

這樣咱們就大功告成了，可是別忘了，咱們要將自帶的checkbox 定義爲display:none; 這樣就能夠隱藏自帶的複選框了。圖片

效果圖（不要忘記將原來的設爲隱藏，這裏爲展現效果）：
input

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。