1，起因
最近在工作中要实现自定义式的radio样式，而我们通常使用的时默认的样式，因为自己实在想不到解决的方法，于是开始搜索，最终看到了不错的解决办法，可以完美解决我们遇到的问题。
2，原理
大家都知道在写结构的时候，radio或checkbox都会跟随label一起使用，label的for属性值和input的id值相同的情况下，点击label就可以选中input，这里正是利用label 来覆盖我们的input默认样式，通过给label添加背景图片（美化的checkbox或radio），也就是在点击的过程中，我们是看不到默认的input的（给input设置z-index:-1），而点击的是label，通过不同的事件，加载不同的背景图片（这里是改变背景图片的位置）
3，设置美化checkbox或radio的默认样式
（1）页面结构
（2）jquery code（前提必须引入jquery库）
jQuery.fn.customInput = function(){ $(this).each(function(i){ if($(this).is('[type=checkbox],[type=radio]')){ var input = $(this); //get the associated label using the input's id var label = $('label[for='+input.attr('id')+']'); //get type,for classname suffix var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio'; //wrap the input + label in a div $('
查看更多关于自定义表单样式之checkbox和radio_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did108624