用css修改input[type=checkbox]时默认样式

点击后

 

h5代码：

<ul>

  <li>

          <input type="checkbox" name="default-address" id="default-address" class="default-address" />

           <label for="default-address" ></label>

           <span class="checkbox-content">设为默认</span>                    

</li>

</ul>

css代码

1、先给最外层li设置相对位置

 ul li:last-child {

        position:relative;

    }

2、隐藏input[type=checkbox]的默认样式，并设置绝对位置

ul li input[type='checkbox'] {

        visibility:hidden;

        position:absolute;

    }

3、给label设置背景图片，并根据需要整体缩小图片，设置图片位置

ul li .default-address + label { 

            background: url('img/default-unselect.png') no-repeat;

            zoom:0.7;

            padding-top:0.01rem;

            padding-left:0.21rem;

        }

4、运用jQuery设置点击时，改变文字和背景图片

$("input[type='checkbox']").change(function () {

            if ($("input[type='checkbox']").is(':checked')) {

                $("input[type='checkbox']:checked + label").css("background","url('../Content/css/img/default-select.png') no-repeat");

                $("input[type='checkbox']:checked + label + .checkbox-content").html("默认");

            } else {

                $("input[type='checkbox'] + label").css("background","url('../Content/css/img/default-unselect.png') no-repeat");

                $("input[type='checkbox'] + label + .checkbox-content").html("设为默认");

            }

        })