Question

I am developing a simple page with a form.
When I put a input text in the page, the characters that appear inside the input element have the browser default values, in chrome using the developers tools I can see that the font defaults to “webkit-small-control”. But one of the fields that will appear in the page will be just a span field with data like this

<td>
   <span id="readOnlyField">data</span>
</td>

When I render the page the data inside the span field is not equal to the data inside the input text field. My question is, how can I know the fonts and colors that the browser is applying to the input text field ? I can not use the value “webkit-small-control” because will not work in another browser.

Answer 1

In general, you can’t know those values, because the defaults vary across browsers. Also, a user can set things like the default font family and style and hyperlink colors.

It is a good practice to use a “CSS reset” stylesheet to override browser defaults with your own “base” styles. There are lots of CSS reset examples on the web, for example the HTML5 Doctor’s one or Eric Meyer’s one. While your question is only about font style, resetting also other styles prevents many headaches in the long run.