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

102

我有输入和标签字段：

<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显示“应该”继承，当我查看计算机时，它显示标签使用Verdana。但是输入显示它使用“ MS Shell Dlg”。

谁能解释正在发生的事情以及为什么它似乎不遵循正常的CSS规则？

css

— 朱迪·R
source

他们不感到很难过。我猜想W3C决定最好将它们设置为系统的默认样式，而不是强加给他们自己的浏览器样式

— vsync

125

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

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

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

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source

字体属性自动继承（如果未提及），请参见：developer.mozilla.org/en/CSS/font

— diEcho 2011年

4

@diEcho，对于从当前系统样式继承的form元素以外的所有元素都是如此，因此它们保持用户熟悉的感觉（默认情况下），但是可以手动覆盖。

— 加布里埃莱·彼得里奥利

1

错误与否，Firebug向我展示的内容非常令人困惑：字体大小为12，但计算得出它仍然变为13.3333。设置字体大小以继承类似于Gaby的回答后，我的问题得到解决：O

— Jeroen

@Gaby设计师总是为我们的开发人员做出所有思考，真是太好了...;）

— AGuyCalledGerald 2012年

此外，如果你把input里面label的label标签不继承默认的CSS

— AmerllicA

16

表单项（输入/文本区域/等）不继承字体信息。您需要在这些项目上设置字体系列。

— 约翰·格林
source

@jhon wat您说的可能是正确的，是否有任何与此相关的标准/有效文件？

— diEcho 2011年

字体元素也不会继承颜色，背景等。实际上，字体元素是整个html / css中最不可靠的东西！您不能为输入框指定宽度，并且保证所有浏览器的宽度都相同！

— Ionuț Staicu 2011年

我的意思是形式元素。仍然困:)

— 爱奥努·斯塔伊库

@diEcho-老实说，我在规格中进行了搜索，但没有发现它在任何地方被呼出。查看“相关”，SO给了我一个重复的问题链接： stackoverflow.com/questions/2874813（尽管没有任何规范链接，但它给出了我的答案）。Chrome中的默认样式表将字体列为“ -webkit-small-control;”，这意味着它已经覆盖了正文，因此比正文中设置的任何内容都更加具体。如果我没有记错的话，TD元素也是如此。因此，除了“就是那样”之外，我不知道该说些什么。

— 约翰·格林

5

三年后，我发现很奇怪<input>的类型的元素reset，submit和button不继承font-family在Chrome或Safari。我发现它们也不会填充。

但是，当我乱用一定的属性，如background，border或这个奇怪的appearance性质，然后font-family和padding有效果，但按钮的本身外观和感觉丧失，这不是一个问题，如果你是完全再造型的按钮。

如果您想要具有继承性的本机外观按钮font-family，请使用<button>元素代替<input>。

参见Codepen。

— 矮胖
source

1

我遇到了同样的问题。对我有用的是将样式直接添加到html中的input元素。我正在用React fyi编码。

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

— rpd1297
source