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

Changing the size of a custom css checkbox

本文关键字：复选框 css 自定义      更新时间：2023-09-26

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

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

相关文章：