Question

我有一个送货/结算输入表单，我无法将输入字段设置为宽度相同......

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

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

我必须为每个浏览器设置一个不同的sytlesheet ...只为这些输入字段？ -Thanks

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”]用作选择器。我只是在这个例子中使用它来关联“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预处理器可以轻松实现这一点。

<强>更新

我做了test fiddle。截至今天（2018年2月），这是在使用Chrome 63，Edge 41，FF 58的Windows 10上运行。在IE 11上，它失败了。我没有尝试过OS X.

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

2 个答案: