CODEWITHSUNDEEP
htmlcssfont-size
tirenweb
tirenweb

Reputation: 31709

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

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

Upvotes: 9

Views: 15146

Answers (5)

Muhammad Ali Malekzadeh
Muhammad Ali Malekzadeh

Reputation: 184

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>

Upvotes: 2

Graham Clark
Graham Clark

Reputation: 12966

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;
}

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

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)

Upvotes: 3

Gert Grenander
Gert Grenander

Reputation: 17084

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

Upvotes: 7

oezi
oezi

Reputation: 51807

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;
}

Upvotes: 23

Related Questions