input的checkbox和radio控件样式美化

最新推荐文章于 2024-08-17 16:33:18 发布

小向光

最新推荐文章于 2024-08-17 16:33:18 发布

阅读量3.8k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/wuyou1336/article/details/52371827

版权

博客介绍了如何使用CSS来美化Web应用中的checkbox和radio控件，以满足设计师对于美观的需求。内容涉及到兼容性问题，指出目前主要兼容Webkit系列浏览器，而Firefox和IE存在局限。文中分享了通过修改CSS属性以及使用span背景图片的方法来实现样式美化，并提到了相关阅读资源。

摘要由CSDN通过智能技术生成

复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般不能满足我们的需求，设计师喜欢一些漂亮的图片，用css做出此效果。

<input type="checkbox" id="gps_open_close" /> 	


input#gps_open_close[type="checkbox"]{<span style="color:#FF0000;">-o-appearance: none; -webkit-appearance: none;-moz-appearance:none;</span>
background-image:url("../../images/pc/gps/select_button.png");vertical-align: middle;
width:19px;height:19px; background-repeat: no-repeat;}

input#gps_open_close[type="checkbox"]:checked{
	background-image:url("../../images/pc/gps/selected_button.png");
}

input[type="checkbox"]{
	-o-appearance: none; -webkit-appearance: none;-moz-appearance:none;
	background-image:url("../../images/pc/gps/checkbox.png");
	width:19px;height:19px;