<input>不从<body>继承字体

Question

<input>不从<body>继承字体

我有输入和标签字段:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

Run Code Online (Sandbox Code Playgroud)

和CSS:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

Run Code Online (Sandbox Code Playgroud)

当代码在Firefox中打开时,字体不一样.Firebug显示两者都"应该"继承,当我看到计算机时,它显示标签使用Verdana.但输入显示它使用"MS Shell Dlg".

任何人都可以解释发生了什么以及为什么它似乎不遵守正常的CSS规则？

Answer 1

Gab*_*oli 111

默认情况下它不会继承,但您可以将其设置为使用css继承

input, select, textarea, button{font-family:inherit;}

Run Code Online (Sandbox Code Playgroud)

演示:http://jsfiddle.net/gaby/pEedc/1/

@diEcho,除了表单元素之外的所有元素都是如此,它继承当前的系统样式,因此它们保持用户熟悉的感觉(*默认为*),但它们是可手动覆盖的. (3认同)

Answer 2

Joh*_*een 14

表单项(输入/ textarea/etc)不继承字体信息.您需要在这些项目上设置font-family.

Answer 3

Sto*_*tie 5

三年后，我发现它<input>的类型很奇怪，reset, submit, 并且button不在font-familyChrome 或 Safari 中继承。我发现他们也不会收到填充。

但是当我弄乱某些属性时，例如background,border或这个奇怪的appearance属性，然后font-family和padding有效果，但是按钮的本机外观和感觉丢失了，如果您完全重新设计按钮，这不是问题。

如果您想要带有继承的原生外观按钮font-family，请使用<button>元素而不是<input>。

见代码笔。

归档时间：	14 年，7 月前
查看次数：	29544 次
最近记录：	6 年，11 月前