色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 多選按鈕選中樣式

榮姿康1年前8瀏覽0評論

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偽類選擇器只適用于多選按鈕和單選按鈕。