更改自定义CSS复选框的大小

Question

我从csscheckbox.com生成了一个自定义CSS复选框，并想知道是否有一种动态更改框的宽度的方法。

我已附加了用于生成复选框的css和html键，因此您可以看一下。 理想情况下，就像我使用div更改复选框的位置一样，我希望能够更改复选框的宽度和高度（但我知道它可能不是那么简单）。

  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:25px; height:20px; display:inline-block; line-height:20px; background-repeat:no-repeat; background-position: 0 0; font-size:20px; vertical-align:middle; cursor:pointer; } input[type=checkbox].css-checkbox:checked + label.css-label, input[type=checkbox].css-checkbox + label.css-label.chk { background-position: 0 -20px; } 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> 

Answer 1

您可以使用background-size，例如40px的框：

 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>