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

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

Changing the size of a custom css checkbox

html

javascript

css

checkbox