对于较新的浏览器，复选框宽度/高度不会改变

Question

我在一个需要符合第 508 节的网站上工作，所以我认为增加复选框的大小对任何仍有视力的视障人士都有用。查看 Chrome 15（与 Chrome 16 相比）的屏幕截图：

这是同一个 css，恰好是：

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

如您所见，宽度和高度的解释非常不同。任何人都知道如何让它与两种浏览器一起使用？（IE9 在右边也做同样的事情）。

Answer 1

实际上没有任何使用实际复选框的跨浏览器解决方案（这是一篇旧文章，但仍然很好且相关）。您可以在 CSS3 中使用一些技巧。我使用的方法对浏览器不太友好（需要更新的浏览器），但还有其他方法对跨浏览器更友好，但仍然不是 100%。例如，我怀疑您会找到任何支持 IE6 的东西。

\n\n

像这样的东西：

\n\n

input.checkbox { display: none }\ninput.checkbox + label > span.checkbox-span { display: inline-block; color: #FFF; border: 1px solid #000; width: 30px; line-height: 30px; font-size: 24px; text-align: center }\ninput.checkbox:checked + label > span.checkbox-span { color: #000 }\n

\n\n\n\n

<input type="checkbox" class="checkbox" id="check_1" />\n<label for="check_1"><span class="checkbox-span">\xe2\x9c\x93</span> Text describing checkbox #1</label>\n

\n\n

这是一个非常基本的例子。请参阅 jsFiddle。

\n