input的checkbox和radio控件样式美化


复选框 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; background-repeat: no-repeat;
}
input[type="checkbox"]:focus,
input[type="checkbox"]:hover {
  background-position: -24px 0;
  outline: none;
}

input[type="checkbox"]:checked {
  background-position: -48px 0;
}

input[type="checkbox"][disabled] {
  background-position: -72px 0;
}

input[type="checkbox"][disabled]:checked {
  background-position: -96px 0;
}


因为图片已经事先合并成一张了,简单修改一下 background-position 就可以了,同时前面几个选择器的优先级(权重)一样,所以书写顺序很重要。

兼容性

目前只兼容 Webkit 系列浏览器;虽然 Firefox 也实现了替代的 -moz-appearance 属性,不过控件原有的背景颜色、边框样式无法修改,暂时也不大好用;IE 系列暂时不支持该属性,更详细的兼容情况查看 Caniuse/appearance。因此需要为 IE 浏览器清除掉背景图片的影响:

input[type="checkbox"] {
  background: #fff url(i/blue.png);
  background: none\0;
  *background: none;
  ...
}


另外在别人的博客上学到了新的方法美化checkbox,使用span设置background,radio的原本样式隐藏


<span class="pay_list_c1 on">
<input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
</span>


.pay_list_c1 {
width: 24px;
height: 18px;
float: left;
padding-top: 3px;
cursor: pointer;
text-align: center;
margin-right: 10px;
background-image: url(images/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
}
.radioclass {
<span style="color:#FF0000;">opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);</span>
}
.on {
background-position: 0 0;
}



相关文章:

ZH奶酪:纯CSS自定义Html中Checkbox复选框样式 

css input checkbox和radio样式美化

使用渐进增强的方式美化复选框样式 


阅读更多
个人分类: css
上一篇使用ajaxfileupload.js进行文件上传,文件可以上传成功,但是不走success回调函数解决办法
下一篇js的JSON
想对作者说点什么? 我来说一句

html checkbox 美化

2018年02月27日 39KB 下载

没有更多推荐了,返回首页

关闭
关闭