CSS常被用來美化網站,其中一個使用廣泛的功能就是改變多選框的樣式。下面就是一個簡單的CSS+多選框代碼示例:
input[type="checkbox"]{ appearance: none; /*去除多選框默認樣式*/ -webkit-appearance: none; /*適用于Safari、Chrome瀏覽器*/ -moz-appearance: none; /*適用于Firefox瀏覽器*/ width: 20px; height: 20px; background-color: #fff; border: 1px solid #ccc; } input[type="checkbox"]:checked{ background-color: #1abc9c; border: 1px solid #1abc9c; }
上述代碼中,input[type="checkbox"]
選擇器指定了多選框的樣式,通過appearance
屬性去除了默認的樣式,然后通過自定義的樣式實現了多選框的基本樣式。同時,通過:checked
偽類選擇器,加入了選中后的背景顏色和邊框效果,實現了多選框選中后的變化。
上一篇css+文字滾動出來
下一篇css+字體的類型