介绍 & lt; !DOCTYPE html> & lt; html> & lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> checkbox
& lt; style>
输入{
宽度:16 px;
高:16 px;
margin-top: 0;
background - color: # fff;
边界:1 px固体# c9c9c9;
border - radius: 2 px;
颜色:# fff;
text-align:中心;
行高:15 px;
-webkit-appearance:没有;
-moz-appearance:没有;
-ms-appearance:没有;
-o-appearance:没有;
外观:无;
大纲:没有;
}
输入:{徘徊
边框颜色:# 43 adea;
}
检查输入:{
颜色:# fff;
background - color: # 43 adea;
边界:1 px固体adea; # 43
}
输入:{后
内容:“?“
}
& lt;/style> & lt;/head> & lt; body>
& lt;输入类型=癱heckbox"祝辞
& lt;输入类型=癱heckbox"祝辞& lt;/body> & lt;/html>
小编给大家分享一下css中怎么自定义复选框样式,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
<强>先看看效果
<强>原理
1。利用CSS3属性外观。
该属性(强制)更改(改变)默认(原生)样式。
Firefox支持替代的-moz-appearance属性;Safari和Chrome支持替代的-webkit-appearance属性,即不支持该属性。
所以可以利用该属性取消复选框的原生样式。
2。利用:检查选择器
当复选框被选中的时候改变样式。
3。:在选择器+内容属性
:后选择器向元素之后插入内容。
我们再利用text-aligen和行高让内容正居中就行了。
<强>实例代码:
看完了这篇文章,相信你对css中怎么自定义复选框样式有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
