Firefox/Safari中文本框的默认外观

Question

Firebug声称未经样式处理的文本框是border: 3px inset #F0F0F0;

然而，<input type="textbox" style="border: 3px inset #F0F0F0;" />和<input type="textbox" />产生非常不同的边框外观。这是怎么回事？

在Safari、Chrome和Firefox中都是如此——我没有IE，所以不知道情况如何。

- Aaron Yodaiken

Answer 1

它应该是这样工作的：如果将appearance/-moz-appearance/-webkit-appearance属性设置为除none以外的其他值，就像在浏览器的默认样式表中为<input type="text">设置的那样，那么元素的常规CSS边框/背景将被舍弃，而采用特定于平台的主题，这可能看起来不同于纯粹的CSS提供的平面3D对象，在具有主题的平台上。

<div style="-moz-appearance: textfield">x</div>
<input style="-moz-appearance: none" value="x"/>

奇怪的是，如果在元素上设置了任何 background 或 border 样式，它的 -moz-appearance 就会被忽略并替换为 none，导致出现您在示例中看到的平面3D边框样式，这就是没有主题时输入框的外观。

即使这些样式不会产生与没有这些样式时不同的计算值，这也是正确的。只有 background: default; border: default 可以避免触发此行为。

（IE 的行为类似，尽管它不公开 appearance 样式。另外，使用 XP/2000 的“经典”主题的用户看不到差异，因为 IE 以一种与“经典”Windows样式相匹配的方式呈现 CSS inset/outset 边框样式。）

- bobince

---

好的答案，我在理解这个问题时遇到了困难，但你已经让它变得非常清晰。当涉及到表单时，我最大的抱怨是无法为type =“file”的输入设置样式 - 这可能会对表单的外观产生很大影响，特别是当您花费时间为所有其他输入设置样式时。 - stephenmurdoch

是的，文件上传字段是独立的。虽然一般情况下自定义样式表单字段都很困难，而且最好避免，但您至少可以设置字段宽度使其对齐整齐，这是文件上传所做不到的。 - bobince

Answer 2

不同操作系统上的不同浏览器将具有各种默认表单控件样式，以匹配操作系统的用户界面。一旦您开始为任何表单元素设置样式，那么您会注意到浏览器也会添加自己的默认样式（您可以覆盖这些样式）。

Firebug 可能只是报告了文本框的特定默认浏览器样式，但由于该元素没有其他样式，因此使用了操作系统的用户界面，因此该样式不可见。

- greenie