您好,登錄后才能下訂單哦!
小編給大家分享一下css中怎么自定義checkbox樣式,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
先看看效果
原理
1.利用CSS3屬性 appearance。
該屬性(強制)更改(改變)默認(rèn)(原生)樣式。
Firefox 支持替代的 -moz-appearance 屬性;Safari 和 Chrome 支持替代的 -webkit-appearance 屬性;IE不支持該屬性。
所以可以利用該屬性取消checkbox的原生樣式。
2.利用:checked選擇器
當(dāng)checkbox被選中的時候改變樣式。
3. :after選擇器 + content屬性
:after選擇器向元素之后插入內(nèi)容。
我們再利用text-aligen和line-height讓內(nèi)容正居中就行了。
實例代碼:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>checkbox</title> <style> input { width: 16px; height: 16px; margin-top: 0; background-color: #fff; border: 1px solid #c9c9c9; border-radius: 2px; color: #fff; text-align: center; line-height: 15px; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; outline: none; } input:hover { border-color: #43adea; } input:checked { color: #fff; background-color: #43adea; border: 1px solid #43adea; } input:after { content: "?"; } </style></head><body> <input type="checkbox"> <input type="checkbox"></body></html>
看完了這篇文章,相信你對css中怎么自定義checkbox樣式有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。