增加 HTML 中复选框的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8242240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Increasing the size of checkbox in HTML
提问by sumit pandey
Is there any way to increase the size of checkbox in HTML?
有没有办法增加HTML中复选框的大小？
采纳答案by alex
Not in an easy cross browser way.
不是简单的跨浏览器方式。
You would get the most flexibility replacing it with a control that utilises JavaScript and CSS. Use a standard checkbox as a fallback.
您将获得最大的灵活性，将其替换为利用 JavaScript 和 CSS 的控件。使用标准复选框作为后备。
These days, with the :checkedpseudo selector, you can make a labelelement to do it as well.
现在，使用:checked伪选择器，您也可以制作一个label元素来完成它。
回答by Shoaib Chikate
One way I changed the checkbox size is by scaling it with CSS:
我更改复选框大小的一种方法是使用 CSS 对其进行缩放：
input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
padding: 10px;
}
回答by Junchao Xu
This works for me.
这对我有用。
<input type="checkbox" id="check" onclick="checked()" style="width:20px;height:20px;"/>
回答by Sjoerd
No. Most browsers ignore the width or height CSS styling of a checkbox. There are two ways around that:
不会。大多数浏览器会忽略复选框的宽度或高度 CSS 样式。有两种方法可以解决这个问题：
- Use a
labeltag so that clicking some other element also triggers the textbox. - Make your own checkbox using Javascript, by switching an image and filling a hidden input box.
- 使用
label标签，以便单击其他元素也会触发文本框。 - 通过切换图像并填充隐藏的输入框，使用 Javascript 制作您自己的复选框。
回答by sumit pandey
I searched a lot and finally i created a custom checkbox.Code is
我搜索了很多，最后我创建了一个自定义复选框。代码是
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
});
</script>
Style is
风格是
.CheckBoxLabelClass{
background: url("uncheck222.png") no-repeat;
padding-left: 5px;
padding-top: 3px;
padding-right: 10px;
margin: 5px;
height: 60px;
width: 60px;
display: block;
}
.CheckBoxLabelClass:hover{
text-decoration: underline;
}
.LabelSelected{
background: url("check1111.png") no-repeat;
padding-left: 5px;
padding-top: 3px;
padding-right: 10px;
margin: 5px;
height: 60px;
width: 60px;
display: block;
}
checkbox code is:
复选框代码是：
<input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass"></label>
回答by Arif H-Shigri
A trick for increasing size of HTML checkbox is increase zoom property of input. It is cross browser compatible and also it will adjust the size according to resolution of device.
增加 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>回答by nadroid
U can create a custom checkbox with 2 images switching with each other on tou
您可以创建一个自定义复选框，其中包含 2 个图像在 tou 上相互切换
回答by Andrew
Set the font-size of the checkbox to something like 5em. Worked for me.
将复选框的字体大小设置为 5em。为我工作。
