html中checkbox自定义样式(css版本)

<span class="choose"><input type="checkbox" class="input_check" id="check3"><label for="check3"></label></span>

  

.choose {
                position: relative;
            }
            .input_check {
                position: absolute;
                visibility: hidden;
            }
            .input_check+label {
                display: inline-block;
                width: 16px;
                height: 16px;
                border: 1px solid #c00;
                cursor: pointer;
            }
            .input_check:checked+label:after {
                content: "";
                position: absolute;
                left: 2px;
                bottom: 12px;
                width: 9px;
                height: 4px;
                border: 2px solid #e92333;
                border-top-color: transparent;
                border-right-color: transparent;
                -ms-transform: rotate(-60deg);
                -moz-transform: rotate(-60deg);
                -webkit-transform: rotate(-60deg);
                transform: rotate(-45deg);
            }

  js:获取到input的checked的状态

$('.input_check').click(function(){
	console.log($(this).prop('checked'))
})

  

posted @ 2018-09-04 18:51  新恒  阅读(4454)  评论(0编辑  收藏  举报