<input> doesn't inherit the font from <body>

I have input and label fields:

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

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

When the code opens up in Firefox the fonts are not the same. Firebug shows that both "should" inherit and when I look at computed it shows the label uses Verdana. However the input shows it uses "MS Shell Dlg".

Can anyone explain what's happening and why it doesn't seem to obey the normal CSS rules?

40102 次浏览
小开

表单项(input/textarea/etc)不继承字体信息。

小开

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

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

demo: http://jsfiddle.net/gaby/pEedc/1/

小开

三年后，我发现类型为 reset、 submit和 button的 <input>元素在 Chrome 或 Safari 中并不继承 font-family，这很奇怪。我发现他们也不会接受填充物。

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

如果希望使用继承了 font-family的本机外观按钮，请使用 <button>元素而不是 <input>。

参见 Codepen。

小开

我也有同样的问题。对我有效的方法是将样式直接添加到 html 中的 input 元素。我正在编码。

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

小开

This question is 10 years old, and some people coming to this recently may find that adding the right <meta> information at the top of the HTML page will fix similar issues experienced on mobile devices - try:

<meta name="viewport" content="width=device-width, initial-scale=1">

MDN 对 视口元信息视口元信息的作用有很好的指导


提交答案