Login/Register
Why isn't my <select> "font-family" property inheriting from <body>?
Asked Answered
Solved htmlcssinheritancefont-family
K

4

8

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?

Kell answered 5/1, 2009 at 12:51 Comment(0)
P
14

If you use:

select {
  font-family: inherit;
}

It'll work fine. CSS is a little quirky when it comes to form controls.

Permeate answered 5/1, 2009 at 12:56 Comment(2)
how can you set individual <option> text bold? Because <option style='font-weight: bold'>bold item</option> doesn't work. – Duckboard
You'll probably get better responses if you ask this in a separate, new question. – Permeate
S
1

Yes font-family: inherit seems the best.
But otherwise:

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

You can also replace '.myfont' for 'select' if you want all select elements to use this.

Hot tip. Do not use quotes around your font family names, it is not understood by all browsers.

Szczecin answered 6/1, 2009 at 4:45 Comment(0)
S
0

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

Just so you know, even if you did have to "copy the style", you don't have to copy the style like you've done above.

You would just apply the samy style to body and .myfont by doing this:

      .myfont, body 
      {
        font-family:"Verdana",Arial,Helvetica,sans-serif;
      }
Singles answered 6/1, 2009 at 4:41 Comment(0)
S
0

James's answer seems the most elegant and correct to me, but I thought I'd just add another way to do it:

.myfont option {
     font-family: "Verdana"; /* etc */
}
Salutary answered 6/1, 2009 at 4:46 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.