javascript - 更改自定义 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

您可以使用背景大小，例如 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>