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

我从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>

最佳答案

您可以使用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>

关于javascript - 更改自定义CSS复选框的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28459392/