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

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


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

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

纯CSS3美化radio和checkbox

如题,主要通过CSS3来实现将radio和checkbox美化的效果,但是兼容性并不是很好,PC端只支持chrome浏览器(IE和Firefox测试不行,其他没有更多测试)。然后微信端和QQ端访问也是...
  • u010571913
  • u010571913
  • 2015年07月20日 15:48
  • 2506

【HTML】radio和checkbox样式美化

仅提供记录,怕忘记了 效果图:   样式 .radio-span {     width: 24px;     height: 18px; ...
  • foreversilent
  • foreversilent
  • 2016年07月08日 17:37
  • 3877

纯CSS 实现radio checkbox样式美化

我们知道CSS 是不能直接定义radio 标签和checkbox 标签的样式,但是默认的实在是太丑了,总要想办法来美化美化这货的。强大的CSS选择器可以帮助我们来实现美化。 首先我们看我们美化过...
  • Jessica_hhh
  • Jessica_hhh
  • 2016年08月22日 14:51
  • 4631

html修改radio、checkbox样式

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

jquery实现表单美化特效包括checkbox和radio美化特效插件

  • 2013年11月15日 15:44
  • 285KB
  • 下载

10个HTML5美化版复选框和单选框

转自:http://www.html5tricks.com/10-pretty-checkbox-radiobox.html 单选框Radiobox和复选框checkbox在网页中也十分常见,虽然...
  • chelen_jak
  • chelen_jak
  • 2015年04月02日 08:24
  • 103240

Bootstrap的iCheck插件checkbox和radio

iCheck   特色: 1、在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2、支持触摸设备 — iOS、Android、BlackBerry、Windows ...
  • bbsyi
  • bbsyi
  • 2016年03月22日 10:44
  • 5787

div仿checkbox表单样式美化及功能

div仿checkbox表单样式美化及功能,使用div图片是checkbox样式变的好看,分享给大家。...
  • rzg813
  • rzg813
  • 2014年05月05日 17:56
  • 3647

Bootstrap复选框和单选按钮美化插件

官网地址 需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载。 chec...
  • a837756
  • a837756
  • 2016年11月23日 16:29
  • 11636
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:input的checkbox和radio控件样式美化
举报原因:
原因补充:

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