如何让复选框更大？

Question

我的网页使用复选框。它们看起来很小。我尝试使用“font-size：1.5em”使它们更大。这似乎根本没有改变它们。

有没有一种简单的方法可以让复选框更大？

谢谢，

Answer 1

您可以使用图片执行此操作。

CSS

#mycheckbox
{ 
    display: none; 
}

#mycheckbox + label
{ 
    float: left; 
    width: 200px; 
    height: 200px; 
    background: url('/path/to/photo_of_big_unchecked_box.png'); 
}

#mycheckbox:checked + label
{ 
    background: url('/path/to/photo_of_big_checked_box.png'); 
}

HTML

<input type="checkbox" name="mycheckbox" id="mycheckbox"><label for="mycheckbox"></label>

这是你实现目标的一种方式。

修改

Here是IE的工作链接

Answer 2

也许这看起来有点太明显了，但它确实有效：

input[type='checkbox'] {
    width: 30px;
    height: 30px;        
}

它可以像你在IE和Chrome上所期望的那样工作，即使它在Firefox上看起来不是很大，你仍然可以获得更大的命中框：

Answer 3

在大多数浏览器中，您无法更改复选框的外观。 检查一下：http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

尝试添加元素并使其更改复选框的状态。 请查看此示例：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Answer 4

可悲的是，CSS有点未定义<input>使得修改它们的可能性有限。各种浏览器的做法不同。 width和height实际上仅适用于Internet Explorer中的复选框。

出现了各种解决方案，例如emulating checkboxes using JS, so those can be styled。

Answer 5

如果您不能改变浏览器兼容的复选框的外观，我建议使用类似Ryan Fait describes in his blog的内容。此技术允许您为复选框使用自定义图形。

---

Answer 6

您可以使用CSS缩放标记。

＆＃13;

＆＃13;

h6 {
  zoom: 5;
}

＆＃13;

<h6><input type="checkbox"></h6>

＆＃13;

＆＃13;

＆＃13;