html - 更改 chrome 和 firefox 的 file_field_tag 文本字段大小

Question

大家好，

我在尝试更改 chrome 和 FF 上 file_field_tag 的默认文本字段时遇到问题，它在 IE 上工作正常，但在其他浏览器上它没有应用大小。

我的代码是。

file_field_tag "#{ compliance.id }_document" , :size => '2

不知道我是否做错了什么，但我确信这是我错过的一件非常小的事情。

提前致谢

Answer 1

HTML 4.01 规范说明这个属性，在 <input type="file"> 的情况下, 以像素而非字符定义宽度。

http://www.w3.org/TR/html4/interact/forms.html#h-17.4

除此之外，您应该使用 CSS 来定义宽度。您有两种选择:使用内联样式:

file_field_tag "#{compliance.id}_document", :style="width: 2em"

或者(最好)向标签添加一个类，并将 CSS 定义放置在您的样式表中:

file_field_tag "#{compliance.id}_document", :class="short"

/* CSS */
input.short {
  width: 2em;
}
/* ..or if you expect some intelligent browsers, you may be more specific: */
input[type='file'].short {
  width: 2em;
}

您可能需要进行一些试验，因为文件控件可能会拒绝接受您的宽度。每个浏览器的默认样式表规则可能会定义一些其他规则，比您的规则更强大。

对于 Firefox，您可能会在文件 forms.css 中看到定义.在我的系统上，位置是 /usr/lib64/xulrunner-1.9.2/res/forms.css .

有个定义，可能对你有帮助:

input[type="file"] > input[type="text"] {
  ....

为 input[type="file"].short > input[type="text"] 定义一个宽度你应该没问题。但请注意，此规则可能会在浏览器的每个版本中发生变化。