input radio 选中css样式,input radio和checkbox的样式美化

做项目的时候我们常常需要使用单选按钮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链接进行查看。