8

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

tirenweb
  • 30,963
  • 73
  • 183
  • 303

5 Answers5

21

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;
}
oezi
  • 51,017
  • 10
  • 98
  • 115
7
body,
input,
select,
button {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
}
Gert Grenander
  • 16,866
  • 6
  • 40
  • 43
3

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)

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Hi, could you explain where does that come from ? (the default font-size) – PaulCo Jun 12 '18 at 14:46
  • 1
    @PaulCo It's the default UA CSS (the styles applied by each browser to an HTML page before any other user and author/developer ones). Can now be found [here for Firefox](https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/forms.css). I don't know what `font: -moz-field;` means but that's what is applied :) You can see those default styles in modern DevTools by activating an option – FelipeAls Jun 13 '18 at 12:44
  • Thanks for this info ! I'm still surprised that you cannot see this on MDN or other platform. – PaulCo Jun 13 '18 at 12:48
  • Forgot to mention my source for the link: https://stackoverflow.com/a/3980775/137626 (remove html.css in the Fx link to see all the files but, well, it's simpler in F12 on a per element basis). There's also a link to WebKit (both are open source, it helps!). Moreover, W3C HTML 5 has [suggestions](https://www.w3.org/TR/html5/rendering.html#rendering). And finally, normalize.css and reboot.css will help you not having to consider those differences (reset CSS are another beast: they'll kill any style which is too much imho) – FelipeAls Jun 13 '18 at 13:51
2

body {
  font-family: sans-serif;
}

button {
  font:inherit
}
<html>
  <head>
  </head>
  <body>
  <p>An example of a sans-serif font</p>
  <button>Cick Me</button>
  </body>
 </html>
Muhammad Ali Malekzadeh
  • 150
  • 1
  • 7
0

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;
}
Dmide
  • 6,422
  • 3
  • 24
  • 31
Graham Clark
  • 12,886
  • 8
  • 50
  • 82