如何让复选框更大？

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缩放标记。

h6 {
  zoom: 5;
}

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