增加HTML中复选框的大小

Question

有没有办法增加HTML中复选框的大小？

Answer 1

我更改复选框大小的一种方法是使用CSS缩放它:

input[type=checkbox] {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    padding: 10px;
}

Answer 2

不是一种简单的跨浏览器方式.

您将获得最大的灵活性,可以使用JavaScript和CSS替换它.使用标准复选框作为后备.

现在,使用:checked伪选择器,您也可以创建一个label元素.

Answer 3

这适合我.

<input type="checkbox" id="check" onclick="checked()" style="width:20px;height:20px;"/>

Answer 4

不是.大多数浏览器忽略复选框的CSS样式的宽度或高度.有两种方法:

• 使用label标记以便单击其他元素也会触发文本框.
• 使用Javascript创建自己的复选框,方法是切换图像并填充隐藏的输入框.

Answer 5

增加 HTML 复选框大小的一个技巧是增加输入的缩放属性。它是跨浏览器兼容的，并且它会根据设备的分辨率调整大小。

.daysCheckbox1{
zoom:1;

}
.daysCheckbox2{
zoom:1.5;

}
.daysCheckbox3{
zoom:2;

}
.daysCheckbox4{
zoom:2.5;

}

<label> Checkbox 1<input type="checkbox" class="daysCheckbox1"   name="Monday"></label><Br>
<label> Checkbox 2<input type="checkbox" class="daysCheckbox2"   name="Monday"></label><Br>
<label> Checkbox 3<input type="checkbox" class="daysCheckbox3"   name="Monday"></label><Br>
<label> Checkbox 4<input type="checkbox" class="daysCheckbox4"   name="Monday"></label><Br>