如何使用 CSS 展平复选框？ [复制]

Question

我正在使用以下 CSS 将表单上的文本框和文本区域展平：

textarea, input[type=text], select {
    border: 1px solid #B5B8C8;
}

我现在想包含复选框 .. 我认为这可以解决问题

textarea, input, select {
    border: 1px solid #B5B8C8;
}

在 Firefox 中似乎没有任何区别。在 IE 9/10 中，我在复选框周围出现了一个奇怪的边框（而不是更改复选框本身。

关于如何使复选框模仿文本框和文本区域以摆脱 3d 影响的任何建议。

Answer 1

没有跨浏览器唯一的 CSS 解决方案来规范化表单元素。对于适用于现代浏览器的非 JS 解决方案，请查看 this CSS ninja article。否则，您最好的选择是 Uniform 之类的东西，它会为您完成繁重的工作，并且会退回到禁用 JavaScript 的常规表单元素。

使用原生表单元素及其样式（尤其是在移动设备上）的好处是巨大的。也就是说，复选框和单选按钮的自定义样式（相对于选择框/日期选择器等）在我的测试中似乎工作得很好。