英特网校

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

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

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

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

HTML代码:

复选框

<input type="checkbox">英特网络Check

<input type="checkbox">英特网络Check

单选框

<input type="radio" name="bd">英特网络radio

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

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}

这样就可以实现对checkboxradio的优化!

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

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

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

 


评论中心

登录后可评论,请 登录 注册