纯css自定义优化checkbox和radio标签

admin 发布于 CSS

网页开发中经常用到checkbox(复选框)和radio(单选框),由于浏览器自带样式比较不美观,而且不同浏览器样式也不经相同,如果想要在不同浏览器都显示效果相同,就必须重置他们的样式!

这里介绍利用纯css对复选框和单选框进行修改的方法,当然大家也可以尝试用js的方法修改,利用纯css存在兼容问题,在IE9及以上才能正常显示,支持谷歌、火狐等主流浏览器。

实现原理:添加一个label标签,然后在标签里添加input和一个span标签,默认然input标签隐藏,span做成checkbox或radio样式(加载图片),然后利用:checked伪类选择器控制按钮是否选中,选中需要切换下span的图片。

HTML代码:

复选框

<label>
<input type="checkbox"><span class="style"></span>英特网络Check
</label>
<label>
<input type="checkbox"><span class="style"></span>英特网络Check
</label>

单选框

<label>
<input type="radio" name="bd"><span></span>英特网络radio
</label>
<label>
<input type="radio" name="bd" checked=""><span></span>英特网络radio
</label>

CSS代码

/*复选框(多选框)的美化CSS*/

input[type="checkbox"]{appearance: none; -webkit-appearance: none;outline: none;display:none}
label{display:inline-block;cursor:pointer;}
input[type="checkbox"]+span{width:16px;height:16px;display:inline-block;background:url(radio.png)  no-repeat;background-position:0 0;background-size:16px 32px;}
input[type="checkbox"]:checked + span{background-position:0 -16px}
/*单选框的美化CSS*/
input[type="radio"]{appearance: none; -webkit-appearance: none;outline: none;display:none}
label{display:inline-block;cursor:pointer;}
input[type="radio"] + span{width:16px;height:16px;display:inline-block;background:url(radio.png)  no-repeat;background-size:16px 32px;background-position:0px -16px;}
label input[type="radio"]:checked + span{background-position:0 0}

这样就可以实现对checkbox和radio的优化!

实际使用时可以自行修改图片,来达到自己想要的效果;在手机端开发时,该效果均可以正常显示,但是由于手机端像素比的问题,图片容易虚化,需要将图片比在pc端的像素至少2倍以上,同时建议将选中和未选中分别放在一张图中,减少很多因像素比引起的其他问题。

效果演示:www.intewl.com/demo/ui/radiocheck/index.html

代码下载:https://pan.baidu.com/s/1UqYw4jmUK_XZodcQnXY7fQ


802浏览量 · 0评论 · 2018-11-08 10:21:30

全部评论  0

注册登录 进行评论

热门专题

更多专题