【CSS】自定义checkbox样式
生活随笔
收集整理的這篇文章主要介紹了
【CSS】自定义checkbox样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
修改原生checkbox樣式。
?
效果
原理
1.利用CSS3屬性 appearance。
該屬性（強制）更改（改變）默認（原生）樣式。
Firefox 支持替代的 -moz-appearance 屬性；Safari 和 Chrome 支持替代的 -webkit-appearance 屬性；IE不支持該屬性。
所以可以利用該屬性取消checkbox的原生樣式。
?
2.利用:checked選擇器
當checkbox被選中的時候改變樣式。
?
3. :after選擇器 + content屬性
:after選擇器向元素之后插入內容。
我們再利用text-aligen和line-height讓內容正居中就行了。
?
源碼
<!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>?
轉載于:https://www.cnblogs.com/linxian95/p/9772223.html
總結
以上是生活随笔為你收集整理的【CSS】自定义checkbox样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （4）pyspark---datafra
- 下一篇： 营销 | 10个助燃商业增长的市场营销战