代码之家 › 专栏 › 技术社区 › Aaron Yodaiken

firefox/safari中的默认文本框外观

stylesheet safari firefox css html

3

Aaron Yodaiken · 技术社区 · 15 年前

Firebug声称未样式的文本框是边框:3px inset f0f0;

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

这在Safari、Chrome和Firefox中是正确的,但是我没有IE,所以我不知道。

2 回复 | 直到 15 年前

1

4

bobince 15 年前

它应该如何工作:如果 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外观 被忽视 没有人 将被替换,从而产生您在示例中看到的平面三维边框样式,这就是不带主题的输入看起来的样子。

即使规则不会导致这些样式的计算值与没有这些样式的计算值不同,这也是正确的。只有 background: default; border: default 避免触发此行为。

(即行为相似,但不暴露 外观 风格。同样,xp/2000__Classic_稹稹主题的用户不会看到任何不同,因为ie呈现CSS inset / outset 边框样式应与“经典”Windows样式匹配。)

2

1

greenie 15 年前

不同操作系统上的不同浏览器将具有不同的默认表单控件样式,以匹配操作系统的UI。一旦开始设置任何表单元素的样式,您就会注意到浏览器也会添加它自己的默认样式(您可以覆盖)。

Firebug可能只是报告文本框的特定默认浏览器样式,但它不可见,因为它们不是该元素的其他样式,因此使用的是OS UI。