Geek Answers Handbook

Inherits the font-family style in SELECT / OPTION

I have HTML code like: -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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 does the first "select" not inherit the "font family" from the specification for "body"?

If I need to change the font for "select", why do I need to copy the style?

+6
html css stylesheet
source share
4 answers

If you use:

 select { font-family: inherit; }

Everything will be fine. CSS is a little freaky when it comes to the format control.

+10
source share

Yes font-family: inheritance seems best.
But otherwise:

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

You can also replace ".myfont" with "select" if you want all select elements to use this.

Hot tip. Do not use quotation marks around the names of your fonts; this is not clear to all browsers.

+1
source share

If I need to change the font for "select", why do I need to copy the style?

Just to let you know, even if you need to "copy a style", you do not need to copy a style, as you did above.

You would simply apply the samy style to body and .myfont by doing the following:

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

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

 .myfont option { font-family: "Verdana"; /* etc */ }
0
source share

More articles:


All Articles