更改自定義CSS複選框的大小

Question

我從csscheckbox.com生成了一個自定義CSS複選框，並且想知道是否有方法可以即時更改框的寬度。

我附上了用於生成複選框的關鍵css和html，以便您看一看。理想情況下，我希望能夠改變複選框的寬度和高度，就像我使用div更改其位置一樣（但我知道它可能不是那麼簡單）。

input[type=checkbox].css-checkbox { 
 
\t \t position:absolute; 
 
\t \t z-index:-1000; 
 
\t \t left:-1000px; 
 
\t \t verflow: hidden; 
 
\t \t clip: rect(0 0 0 0); 
 
\t \t height:1px; 
 
\t \t width:1px; 
 
\t \t margin:-1px; 
 
\t \t padding:0; 
 
\t \t border:0; 
 
\t } 
 

 
\t input[type=checkbox].css-checkbox + label.css-label, input[type=checkbox].css-checkbox + label.css-label.clr { 
 
\t \t padding-left:25px; 
 
\t \t height:20px; 
 
\t \t display:inline-block; 
 
\t \t line-height:20px; 
 
\t \t background-repeat:no-repeat; 
 
\t \t background-position: 0 0; 
 
\t \t font-size:20px; 
 
\t \t vertical-align:middle; 
 
\t \t cursor:pointer; 
 
\t } 
 

 
\t input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk { 
 
\t \t background-position: 0 -20px; 
 
\t } 
 

 
\t label.css-label { 
 
\t \t background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1fa1a7b77abfce3de56af87fcec6bed3.png); 
 
\t \t -webkit-touch-callout: none; 
 
\t \t -webkit-user-select: none; 
 
\t \t -khtml-user-select: none; 
 
\t \t -moz-user-select: none; 
 
\t \t -ms-user-select: none; 
 
\t \t user-select: none; 
 
\t }

<div style="position:absolute;top:0;left:0;"> 
 
     <input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox"> 
 
     <label for="checkboxG4" class="css-label radGroup1 clr">Option 1</label> 
 
    </div>

Answer 1

你可以使用背景尺寸，例如，用40像素框：

input[type=checkbox].css-checkbox { 
 
    position:absolute; 
 
    z-index:-1000; 
 
    left:-1000px; 
 
    verflow: 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, input[type=checkbox].css-checkbox + label.css-label.clr { 
 
    padding-left:45px; 
 
    height:40px; 
 
    display:inline-block; 
 
    line-height:40px; 
 
    background-repeat:no-repeat; 
 
    background-position: 0 0; 
 
    font-size:20px; 
 
    vertical-align:middle; 
 
    cursor:pointer; 
 
    background-size:40px 
 
} 
 

 
input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk { 
 
    background-position: left bottom; 
 
} 
 

 
label.css-label { 
 
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1fa1a7b77abfce3de56af87fcec6bed3.png); 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<div style="position:absolute;top:0;left:0;"> 
 
     <input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox"> 
 
     <label for="checkboxG4" class="css-label radGroup1 clr">Option 1</label> 
 
</div>