views:

2813

answers:

4

I have a HTML code like: -

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
          body
          {
            font-family:"Verdana",Arial,Helvetica,sans-serif;
          }
          .myfont
          {
            font-family:"Verdana",Arial,Helvetica,sans-serif;
          }
    </style>
</head>
<body>
    Hello
    <select>
        <option>
            Hello
        </option>
    </select>

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

</body>
</html>

Why the first "select" is not inheriting the "font-family" from the specification for "body"?

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

+5  A: 

If you use:

select {
  font-family: inherit;
}

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

James Burgess
how can you set individual <option> text **bold**? Because <option style='font-weight: bold'>bold item</option> doesn't work.
Bakhtiyor
You'll probably get better responses if you ask this in a separate, new question.
James Burgess
A: 

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;
      }
AmbroseChapel
A: 

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.

GONeale
A: 

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 */
}
nickf