customInput - jQuery美化单选框复选框效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

如果你在做一个精致的网站的时候，通常默认的单选框和复选框样式都不会满足我们的要求，这个时候我们就要对单选框和复选框做美化效果。 在这里我介绍一个使用jQuery来美化单选框复选框效果。

实现原理

在写单选框或者复选框的时候,一般都是radio或checkbox都会跟随label一起使用，label的for属性值和input的id值相同的情况下， 点击label就可以选中input，这里正是利用label 来覆盖我们的input默认样式， 通过给label添加背景图片（美化的checkbox或radio），也就是在点击的过程中，我们是看不到默认的input的（给input设置z-index:-1），而点击的是label，通过不同的事件，加载不同的背景图片，这里是改变背景图片的位置

使用后的代码

<div class="custom-checkbox">
    <input type="checkbox" value="" id="check-1"><label for="check-1" class="">
        瑜伽</label></div>

<div class="custom-radio">
    <input type="radio" value="1" id="radio-1" name="sex"><label for="radio-1" class="">
        男</label></div>

如何使用

需要引入的文件

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/customInput.js" type="text/javascript"></script>

customInput调用。

<script>
    $("input").customInput();
</script>