关闭

input的checkbox和radio控件样式美化

1272人阅读 评论(0) 收藏 举报
分类:


复选框 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样式美化

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


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:125788次
    • 积分:1809
    • 等级:
    • 排名:千里之外
    • 原创:224篇
    • 转载:151篇
    • 译文:1篇
    • 评论:7条
    文章分类
    最新评论