做项目的时候我们常常需要使用单选按钮input[type=radio]和多选框input[type=checkbox],但是默认的样式肯定与UI设计不一致,而且不够美观,这个时候就需要修改默认的样式,方法其实有蛮多,最先想到的是图片,但是有些时候,图片作为背景图片使用,在手机端适配效果不太理想,所以利用css3的重新实现了一遍,注意,因为使用到伪类属性,故在ie8下无效。
原理利用label标签与对应的input关联,设置label标签的样式,同时input设置透明度为0或者隐藏,使用position(定位)让用户看到的label标签的样式,点击label时会选择到对应的input,使用input的:checked伪类选择器来改变选中label的样式。另外,这里小萌介绍两种方法,一种是使用纯CSS美化按钮,另外一种是使用iconfont搭配css美化按钮,dome链接附在文章底部,需要的小伙伴儿可自行下载。
方法一:使用纯css修改单选框radio
是
否
HTML
方法二:使用iconfont搭配css修改单选框radio
选项一
选项二
选项三
另外,此方法需要搭配js来实现效果,也很简单$('.method-two label').on('click',function(){
var radioId = $(this).attr('name');
$('.method-two label').removeClass('icon-choice icon-selected') && $(this).addClass('icon-selected').parent().siblings().children('label').addClass('icon-choice');
$('.method-two input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
});
使用纯css修改多选框checkbox
选项一
选项二
选项三
这里主要展示html部分的代码,具体的css样式的代码,需要的同学可点击下方的DEMO链接进行查看。