<p>My code:</p> <p></p> <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="prettyprint snippet-code-css lang-css prettyprint-override"><code>body { font-family:"Verdana",Arial,Helvetica,sans-serif; } .myfont { font-family:"Verdana",Arial,Helvetica,sans-serif; }</code></pre> <pre class="prettyprint snippet-code-html lang-html prettyprint-override"><code><body> Hello <select> <option> Hello </option> </select> <select class="myfont"> <option> Hello </option> </select> </body></code></pre> </div> </div> <p>Why is the first <code><select></code> element not inheriting the <code>font-family</code> property from the specification for <code><body></code>?</p> <p>If I have to change the font for a <code><select></code> why do I have to copy the style?</p>

<p>If you use:</p> <pre class="prettyprint"><code>select { font-family: inherit; } </code></pre> <p>It'll work fine. CSS is a little quirky when it comes to form controls.</p>

Why isn't my <select> "font-family" property inheriting from <body>?

Tags:

html

css

inheritance

font-family

My code:

body {
    font-family:"Verdana",Arial,Helvetica,sans-serif;
}
.myfont {
    font-family:"Verdana",Arial,Helvetica,sans-serif;
}

<body>
    Hello
    <select>
        <option>
            Hello
        </option>
    </select>
    <select class="myfont">
        <option>
            Hello
        </option>
    </select>
</body>

Why is the first <select> element not inheriting the font-family property from the specification for <body>?

If I have to change the font for a <select> why do I have to copy the style?