分享美化复选框和单选框插件

 复选框和单选框是表单中使用非常频繁的组件，但在多数浏览器上显示比较死板，

大家都知道，在Web的Form中美化是最头痛的，尤其是表单中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select这些元素我们单单只使用CSS是无法匹配设计图的，像背景颜色或者背景图片，甚至说margin和padding等等在各浏览器下都没法实现一致的效果

本文介绍一个 jQuery 插件，用来美化这些组件。

 有图才有说明力

 首先引入 三个文件

 jquery-1.8.1.min.js

 Checkable.js

Checkable.css

开始页面写js脚本

<script>

$().ready(function(){

  $('input.myClass').Checkable({   color: 'blue'   });

}); </script>

单选框写入html 文件

<input id="Radio1" type="radio"  class="myClass" value="yes" id="answer" name="answer" data-label="大连" data-color="blue"/>
<input id="Radio2" type="radio"  class="myClass" value="yes" id="answer" name="answer" data-label="深圳"/>

 其中 data-label 为单选框的文本内容  data-color 字的颜色

多选框写入html

<input type="checkbox" class="myClass" value="yes" id="answer" name="answer" data-label="大连"/>
<input type="checkbox" class="myClass" value="yes" id="Checkbox1" data-label="沈阳" name="answer"/>
<input type="checkbox" class="myClass" value="yes" id="Checkbox2" name="answer" data-label="深圳"/>
<input type="checkbox" class="myClass" value="yes" id="Checkbox3" name="answer" data-label="上海"/>

这里要注意 文本框类要写上 class="myClass" 这句话

如果大家有好看单选多选图片可以发给我哦

 下载地址为

 https://files.cnblogs.com/qheasyui/min.zip

说明 有些代码可能来源于互联网  或者基于互联网的修改版。