Home/ Questions/Q 8339847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T04:59:41+00:00

I have an inputfield that should exactly look like the normal body-text. It does

  • 0

I have an inputfield that should exactly look like the normal body-text.
It does not have anything special specified. In my css reset I have this …

input, textarea, button, select {
    margin: 0;
    font-size: 100%;
    line-height: normal;
    vertical-align: baseline;
}

The text inside the input field is bigger than the one above … see my example screenshot. The lower line is an inputfield, the upper line normal text.

enter image description here

This occurs in all browsers. If I would change the font-size for inputs to 97% it would be about right. However I simply don’t get why text-inputs resize the font-size?

any thoughts on that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to set font-size on the input too as it won’t inherit it from the body directly.

    This is because newer browsers will use it’s own base stylesheet to format the inputs.

    http://jsfiddle.net/mjPE9/ (default font in firefox will be serif, but inputs will always get a sans-serif font if not specified differently)

    If you use Firebug you can see all this User agent styles the browser sets if you check Show user agent styles in the Style tab dropdown. The file used is forms.css – you can easily find it on your system and check what it’s happening behind the scenes if you do a search.

    • 0