为什么 HTML 表单字段不继承 CSS 样式？答案

【问题标题】：Why are CSS-styles not inherited by HTML form fields?为什么 HTML 表单字段不继承 CSS 样式？
【发布时间】：2012-06-30 07:18:49
【问题描述】：

我想在我的 HTML 文档中设置文本的字体样式和字体大小。

<html>
<head>
    <title>Style inheritance</title>
    <style type="text/css">
    <!--
    body    {
            background-color: #000000;
            font-family: sans-serif;
            color: #EEEEEE;
            margin: 0;
            font-size: 22pt;
    }
    -->
    </style>

</head>
<body>
    test text
    <form>
        <input type="text">
    </form>
</body>
</html>

我曾经了解到，每个 HTML 元素都会继承其父元素的样式属性。在我的例子中，body 的所有子元素的大小都应该是 22pt。

但是为什么这不适用于input、select、textarea 等？

【问题讨论】：

标签： html css forms inheritance styles

【解决方案1】：

input, select, textarea button - 它们默认不继承，但您可以将其设置为使用 css 继承

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

现场演示：http://jsfiddle.net/rvjKE/

body {
  font-family: courier;
}

input {
  width: 250px;
}

input.inherit {
  font-family: inherit;
}

<div>simple text should be courier</div>
<input type="text" value="input text - does not inherit" /><br/>
<input type="text" class="inherit" value="input text - inherit from css" />

【讨论】：

【解决方案2】：

仅当没有样式表在元素上设置该属性时（或已设置值inherit），元素才继承该属性。表单字段通常在浏览器样式表中对其进行设置。

因此您需要显式设置它们的属性以覆盖浏览器默认值。如果您希望 all 元素具有某些属性，则可以使用通用选择器 * 来执行此操作，例如

* { font: 100% Calibri, sans-serif; }

您可以在需要时轻松地为特定元素覆盖它，因为通用选择器的特异性非常低。

【讨论】：

【解决方案3】：

这是因为它们是用户界面元素，默认情况下采用用户操作系统的外观和感觉。至少，他们曾经如此。现在不同的浏览器使用不同的默认样式，但它们通常都非常相似。

无论如何，这个想法是允许网站所有者修改周围界面元素的外观，同时仍保持用户输入元素的默认外观。强迫您单独更改样式是这样做的唯一方法。

【讨论】：

【解决方案4】：

您可以使用form CSS 选择器来设置输入样式

form{
    font-family: sans-serif;
    color: #EEEEEE;
    font-size: 22pt;
}

【讨论】：