为什么<input>不能从bodyinheritance字体？

我有input和标签字段：

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

和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; } 

当代码在Firefox中打开时，字体是不一样的。 Firebug显示这两个“应该”inheritance，当我看着计算它显示标签使用Verdana。 但input显示它使用“MS Shell Dlg”。 任何人都可以解释发生了什么，为什么它似乎不服从正常的CSS规则？

朱迪

Answer 1

它不会默认inheritance，但可以将其设置为使用cssinheritance

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

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

Answer 2

表单项（input/ textarea /等）不会inheritance字体信息。 您需要在这些项目上设置字体系列。

Answer 3

三年后，我发现在Chrome或Safari中，奇怪的<input>types的元素reset ， submit和button不会inheritancefont-family 。 我发现他们也不会收到填充。

但是，当我混淆了某些属性，如background ， border ，或这种奇怪的appearance属性，然后font-family和padding有效果，但本机的外观和感觉的button丢失，这是不是一个问题，如果你是完全restylingbutton。

如果您希望使用inheritance的font-family的本机外观button，请使用<button>元素而不是<input> 。

见Codepen 。

Answer 4

我有同样的问题。 对我而言，直接将样式添加到HTML中的input元素。 我在React fyi编码。

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />