设计狮童鞋总是会设计各种高大上的效果图，比如下面这个土豪金的效果。
该图中“已阅读并同意相关服务条款”前面的复选框有一个金色的边框，打钩时是一个金色的对勾。接下来说说怎样实现该效果。
二、解决方法1、纯css解决方法
在css3 选择器（三）一文中介绍过一个选择器【:checked】选择器。
单选按钮和复选按钮都有选中和未选中状态。要设置这两个按钮默认样式稍微复杂点。该文通过:checked选择器配合其他表情实现自定义样式。
举例：使用:checked选择器模拟实现复选框样式。
form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto;}.wrapper { margin-bottom: 10px;}.box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle;}.box input { opacity: 0;}.box span { position: absolute; top: -10px; right: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange;}input[type="checkbox"] + span { opacity: 0;}input[type="checkbox"]:checked + span { opacity: 1;} 模拟实现一个选中和未选中的样式。
没有样式时的效果图如下，
最终添加样式后效果如下。
实际开发中，我尝试使用这种方法。
这种方法有个问题：点选框时无法选中，必须点文字才能选中 。
这在实际应用中肯定是无法忍受的,实际应用中推荐第二种方法。
2、配合js解决方法
用到图片：
原理：label和input外面套一层.custom-checkbox作为父元素相对定位。
input绝对定位于左上角，label也绝对定位于左上角，覆盖input的方块。通过给label设置padding-left和背景图来模拟未选中状态。选中时加一个.right类更改背景图片为选中状态的背景图。
通过js点击事件，label被点击时在选中与未选中状态切换。
.custom-checkbox{border:1px solid red;position:relative;height:30px;}.custom-checkbox input{position:absolute;}.custom-checkbox label{padding-left:20px;position:absolute;top:-1px;left:0;background:url(images/bg-unchecked.png) no-repeat top 4px left 3px;}.custom-checkbox label.right{background:url(images/bg-checked.png) no-repeat top 2px left 3px;} 已阅读并同意相关服务条款
查看更多关于表单元素--checkbox样式美化_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109765