How to style a checkbox using CSS

前端 未结 30 3591
日久生厌
日久生厌 2020-11-21 04:26

I am trying to style a checkbox using the following:

30条回答
  •  猫巷女王i
    2020-11-21 05:16

    input[type=checkbox].css-checkbox {
        position: absolute;
        overflow: hidden;
        clip: rect(0 0 0 0);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
    }
    
    input[type=checkbox].css-checkbox + label.css-label {
        padding-left: 20px;
        height: 15px;
        display: inline-block;
        line-height: 15px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 15px;
        vertical-align: middle;
        cursor: pointer;
    }
    
    input[type=checkbox].css-checkbox:checked + label.css-label {
        background-position: 0 -15px;
    }
    
    .css-label{
        background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
    }
    

提交回复
热议问题