inputradio选中css样式,inputradio和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
html 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链接进⾏查看。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。