HTML, CSS ..: different fonts in buttons and selects than for plain text (at least in FF)

Question

I have this rule:

body { font-family: Arial,Helvetica,sans-serif; font-size: 12px } 

but I have a different font size for the selected ones and buttons, and then for plain text.

What should I do if I want the same size for everything?

Hi

Xavi

Answer 1

 body, input, select, button { font-family: Arial,Helvetica,sans-serif; font-size: 12px; } 

Answer 2

Formular elements usually do not inherit these properties, so you need to do:

 body{ font-family: Arial,Helvetica,sans-serif; font-size: 12px; } input, select, button{ font-family: inherit; font-size: inherit; } 

Answer 3

By default, form elements such as text and password text input (submit and button?), Select, textarea and button are styled in a monospaced font with a resulting size of approx. 13.33px.
You can check C:\Program Files\Firefox\res\forms.css (under WinXP) or Firebug for the HTML part, a small triangle to the right of the Style tab ==> Default CSS Properties

 body { font: normal 62.5%/1.5 Verdana,Arial,Helvetica,sans-serif; } input, select, textarea, button { font-size: 1.2em; } p { font-size: 1.2em; } 

will result in 12px + Verdana form elements (and 1em = 10px equivalence for your entire page)

Answer 4

Not sure about the buttons, but most browsers try to style <select> elements as standard (for example, 12-point Arial). If you want to change their style, you must add an explicit CSS rule:

 select { font-family: Arial,Helvetica,sans-serif; font-size: 12px; }