input - 跨浏览器输入字段宽度样式化

Question

我有一个运输/账单输入表单，我无法将输入字段的样式设置为相同的宽度......

问题：
-a 字段<input type="text" size="X" />似乎在不同的浏览器中呈现不同的大小（请参阅链接）。
- 此外，选择字段似乎也以不同的方式呈现。
-Chrome/safari 似乎没有响应选择字段的字体大小属性。

任何关于如何设置文本输入大小和跨浏览器选择字段的指导都会非常有帮助。

我是否必须为每个浏览器使用不同的样式表……仅针对这些输入字段？-谢谢

Answer 1

首先删除该内联“大小”属性。您应该使用 CSS 来设置输入表单的样式：

input[type="text"] {
    width: 100px;

    /* You can also style padding, margins and everything else,
     * just remember that inputs of type "text" can only be one line. 
     */
}

不要使用 [type="text"] 作为选择器。我只是在这个例子中使用它来关联“文本”类型的输入字段，但它并不完全支持跨浏览器。你应该给你的文本输入字段他们自己的类来风格化。

另外，不要忘记您的 CSS 重置以确保您的边距、边框等。人。为所有浏览器重置。http://meyerweb.com/eric/tools/css/reset/

Answer 2

如今，可以使用ch单位来标准化“大小”输入的宽度，这已经达到了不错的浏览器支持。

不幸的是，仍然无法编写：

input[size] {
  width: attr(size) "ch";
}

所以我们必须设置我们知道我们将使用的宽度：

input[size="10"] {width: 10ch;}
input[size="20"] {width: 20ch;}
input[size="30"] {width: 30ch;}
/* etc. */

这可以使用 CSS 预处理器轻松实现自动化。

更新：

我做了一个测试小提琴。截至今天（2018 年 2 月），这适用于带有 Chrome 63、Edge 41、FF 58 的 Windows 10。在 IE 11 上，它失败了。我还没有在 OS X 上尝试过。