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

Question

Hi,

I have this rule:

body {

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

but i have different font size for the selects and the buttons then for plain text.

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

Regards

Javi

Answer 1

Not sure about buttons, but most browsers try to style <select> elements in a standard way (e.g. 12-point Arial). If you want to change the style of these, you have to add an explicit CSS rule:

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

Answer 2

formular elements usualy don't inherit those properties, so you have to do:

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

Answer 3

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

Answer 4

By default, form elements like input of type text and password (submit and button ?), select, textarea and button are styled with a monospace font with a resulting size of approx. 13.33px.
You can check C:\Program Files\Firefox\res\forms.css (under WinXP) or with Firebug in the HTML part, the little triangle at the right of 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 whole page)