CSS多選按鈕選中樣式是Web頁面設計中很常用的一種控件,它可以讓用戶在多個選項中選擇想要的選項,同時也可以設置選中后的樣式,下面我們來看一下如何設置多選按鈕的選中樣式。
/* HTML代碼 */ <label> <input type="checkbox">選項一 </label> <label> <input type="checkbox">選項二 </label> <label> <input type="checkbox">選項三 </label> /* CSS代碼 */ input[type="checkbox"]:checked+label { background-color: #C7EEDD; } input[type="checkbox"]:checked+label:before { content: "\2714"; font-size: 18px; color: #5cb85c; margin-right: 5px; }
上述代碼中,我們使用了CSS中的:checked偽類選擇器,該選擇器可以選擇被選中的多選按鈕,并設置它的樣式。我們設置選中后的背景顏色為#C7EEDD,同時在選項前添加了一個綠色的勾勾。
在添加勾勾的樣式中,我們使用了:before偽元素,并加上content屬性,其中"\2714"代表了一個Unicode字符,也就是勾勾的形狀。通過設置font-size和color屬性,我們可以調整勾勾的字體大小和顏色。
除此之外,我們還可以利用:checked偽類選擇器來設置其他樣式,例如文本顏色、邊框顏色等,不過要注意的是,:checked偽類選擇器只適用于多選按鈕和單選按鈕。