<input>不从<body>继承字体
<input>不从<body>继承字体
提问于 2011-05-21 15:55:38
我有输入和标签字段：
<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显示两者都“应该”继承，当我查看computed时，它显示标签使用了Verdana。然而，输入显示它使用"MS Shell Dlg“。
谁能解释一下发生了什么，为什么它似乎不遵守正常的CSS规则？
回答 5
Stack Overflow用户
发布于 2011-05-21 16:11:19
默认情况下，它不会继承，但您可以将其设置为使用css继承
input, select, textarea, button{font-family:inherit;}Stack Overflow用户
发布于 2011-05-21 15:58:35
表单项目(输入/文本区域等)不继承字体信息。您需要在这些项目上设置font-family。
Stack Overflow用户
发布于 2015-01-14 05:09:42
三年后，我发现奇怪的是，reset、submit和button类型的<input>元素在Chrome或Safari中没有继承font-family。我发现他们也不会收到填充。
但是，当我处理某些属性时，比如background、border或这个奇怪的appearance属性，那么font-family和padding就会生效，但是按钮的本机外观和感觉就会丢失，如果您要完全重新设计按钮的样式，这不是问题。
如果您想要一个具有继承font-family的本机外观的按钮，请使用<button>元素而不是<input>。
参见Codepen。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6080413
复制相关文章
相似问题