input的checkbox和radio控件样式美化

原创 2016年08月30日 18:34:54


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

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


相关文章推荐

【HTML】radio和checkbox样式美化

仅提供记录,怕忘记了 效果图:   样式 .radio-span {     width: 24px;     height: 18px; ...

纯CSS美化单复选框(checkbox、radio)

这是在工作中遇到需要美化单选框和复选框查资料看到别人的,特别声明此文是转载别人,在此感谢原作者。觉得很有用在此码起来 原理就是:隐藏选择框本身,在利用标签放在原来选择框位置上。看代码: ...

css:默认的checkbox、input、radio太丑了?手把手教你改变使用纯css3改写的带动画的默认样式

项目的github地址为: https://github.com/sunshine940326/css3formeledemo 本文首发于我的个人博客,http://cherryblog.si...

简单重写类型为radio的input元素样式

简直菜得扣脚浏览器自己有一些诸如滚动条,文本框,输入框的特有样式,如果直接使用会根据不同浏览器造成不同的显示效果,所以会重写这些样式是很有必要的。input元素radio类型很容易理解有选中前的样式和...
  • Ajexton
  • Ajexton
  • 2016年06月22日 22:39
  • 2516

html修改radio、checkbox样式

把以下代码添加到css样式里input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: mid...
  • qf0129
  • qf0129
  • 2016年02月03日 14:33
  • 7338

利用css3修改input[type=radio]样式

利用标签与对应的关联,给设置透明,使用position(定位)让用户看到的是标签的样式,点击时会选择到对应的,使用的:checked伪类选择器来改变选中的样式. div> inpu...

改变单选按钮radio的默认样式

默认的radio的样式很丑,那么如何改变其默认的样式呢? 我最开始想的是能不能直接给radio设置背景色等,发现并没有用!可以借助于标签来创建一个类似于radio的效果。 先来看下效果: html...
  • cwzhsi
  • cwzhsi
  • 2016年05月08日 21:46
  • 11105

自定义radio与checkbox的样式

由于input中的radio与checkbox的样式比较单一而且样式不是很美观,所以我们一般都想定义一个自己比较喜欢的样式,偶然发现这种自定义方法比较容易理解,在此特意分享一下: 首先是自定义单选框...
  • Doulvme
  • Doulvme
  • 2016年12月30日 14:11
  • 1732

javascript改变input radio的样式

.create_user_sex label,.create_user_state label         {             display:-moz-inline-block; ...

纯CSS 实现radio checkbox样式美化

我们知道CSS 是不能直接定义radio 标签和checkbox 标签的样式,但是默认的实在是太丑了,总要想办法来美化美化这货的。强大的CSS选择器可以帮助我们来实现美化。 首先我们看我们美化过...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:input的checkbox和radio控件样式美化
举报原因:
原因补充:

(最多只允许输入30个字)