1,起因

最近在工作中要实现自定义式的收音机样式，而我们通常使用的时默认的样式，因为自己实在想不到解决的方法，于是开始搜索，最终看到了不错的解决办法，可以完美解决我们遇到的问题。

2,原理

大家都知道在写结构的时候收音机或检验盒都会跟随标签一起使用，标签的为属性值和投入的编号值相同的情况下，点击标签就可以选中输入，这里正是利用标签来覆盖我们的投入默认样式，通过给标签添加背景图片（美化的检验盒或无线电),也就是在点击的过程中，我们是看不到默认的投入的（给投入设置z-index:-1)，而点击的是标签，通过不同的事件，加载不同的背景图片（这里是改变背景图片的位置)

3,设置美化检验盒或收音机的默认样式

(1)页面结构

form class=' form '方法=' post '字段集图例你喜欢哪些流派？/图例输入类型='复选框'值=' Action ' id=' check-1 ' name='温柔'标签为=' check-1 ' class=' Action/Adventure/label输入类型='复选框'值='漫画' id=' check-2 ' name='温柔'标签为=' check-2 ' class='漫画/标签'输入类型='复选框'值=' Epic ' id=' check-3 ' name='温柔'标签为=' check-3 ' class=' Epic/historic/label输入类型='复选框'值='/图例输入类型='单选value=' 1 ' id=' radio-1 ' name=' approvals '标签为=' radio-1 ' class=' total/label input type=' radio ' value=' 1 ' id=' radio-2 ' name=' approvals '标签为=' radio-2 ' class='你一定是在开玩笑/label输入类型=' radio '值=' 1 ' id=' radio-3 ' name=' approvals '标签为=' radio-3 ' class='什么是Caddyshack？ /label /fieldset/form(2)jquery代码（前提必须引入jquery库)

jquery。fn。custominput=function(){ $(this).每个（函数(i){ if($(this)).is('[type=checkbox]，[type=radio]'){ var input=$(this)；//使用输入的id var label=$(' label[for=' input。attr(' id ')']')获取关联的标签；//获取类型，对于类名后缀var inputType=(输入。是('[type=checkbox])？复选框":"单选；//用div $(' div class=' custom-' inputType ' '/div ')包装输入标签。插入之前（输入)。追加（输入，标签);//使用共享名称属性var allInputs=$(' input[name=' input。attr(' name ')']')查找此集中的所有输入；//对于不支持标签。悬停(函数(){ $(this))上的：悬停伪类的浏览器是必需的. addClass('悬停');if(InputType==' checkbox '输入。是(' : checked '){ $(this).添加类(' CheckEdHover ')；} }，function(){ $(this).removeClass("悬停检查悬停");});//绑定自定义事件，触发它，绑定点击，聚焦，模糊事件input.bind('updateState '，function(){ if(input。是(' :选中'){ if(输入。is(' : radio '){ all inputs。每个(函数(){ $(' label[for=' $(this))).attr('id') ']').removeClass(“”选中');});};label.addClass('选中');} else { label。移除类(“选中悬停选中焦点”)；} }) .触发器(“更新状态”).单击(function(){ $(this)).触发器(' updateState ')；}) .focus(function(){ label。add class(' focus ')；if(InputType==' checkbox '输入。是(' : checked '){ $(this).添加类(' CheckedFocus ')；} }) .blur(function(){ label。移除类(“焦点选中焦点”)；});} });}引入jquery库，再引入上面的代码后，就可以执行下面的代码

$("输入")。customInput()；(3)生成的外层差异

如果你的代码结构是标签和投入成对写的话，那么在它们的外层就会生成一个div，如图

(4)设置自定义默认样式

准备好一张图，如下：

你可能会问，为什么上面没有在顶端，而是有一定的距离，因为我们的投入选项多是居中的，而我们是使用标签的背景图片来模拟的，所以我们是为了让投入选项居中显示。总之：ico小图标一定要垂直排列，一定要留有一定的距离来达到居中显示。

/*包装div */.自定义复选框，自定义无线电{ position : relative display :内联块；} /*输入，标签定位*/。自定义复选框输入，自定义无线电输入{ position : absolute eleft : 2pxtop : 3pxmargin : 0；z指数：-1;} .自定义复选框标签，自定义无线电标签{显示：块；相对位置：z-index : 1；font-size : 1.3 em填充-右侧： 1em线高： 1;padd : 5em 0 . 5em 30 pxmargin 3360 0 . 3em cursor :指针；}这是最外层的一些设置，当然你可以自己修改

/*==默认状态效果==*/.自定义复选框标签{背景： URL(图像/复选框。gif)不重复；} .自定义-单选标签{背景： URL(图像/按钮-单选。巴布亚新几内亚)无重复；} .自定义复选框标签，自定义-无线电标签{背景-位置0px 0px}/*==鼠标悬停和得到焦点状态==*/.自定义复选框标签。悬停，自定义复选框标签。焦点，自定义无线电标签。悬停，定制无线电标签。焦点{/*背景-位置：-10px-114 px；*/} /*==选中状态==*/.自定义复选框标签。选中定制无线电标签。已检查{背景-位置： 0px-47px；} .自定义复选框标签。选中悬停，自定义复选框标签。checked focus {/* background-position :-10px-314 px；*/} .自定义复选框标签。焦点，定制无线电标签。焦点{轮廓： 1px虚线# ccc}结尾：总之，我是完美的解决了我的问题，顺便截图发一个看看

以上所述就是本文的全部内容了，希望大家能够喜欢。