CODEWITHSUNDEEP
htmlcssbrowserfontscross-browser
tt0686
tt0686

Reputation: 1849

Browser default values

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.

Upvotes: 2

Views: 4838

Answers (8)

Adriano G. V. Esposito
Adriano G. V. Esposito

Reputation: 383

It is a behavior of WebKit.

See https://bugs.webkit.org/show_bug.cgi?id=50092

For a solution see: http://sijobling.com/tips/css-fix-for-html5-search-in-webkit/

Upvotes: 0

chowey
chowey

Reputation: 9836

If you are willing to use javascript, you can use getComputedStyle to find this data (check out Mozilla Developer Network).

For old IE browsers, you would need to use the currentStyle property (check out Quirksmode).

To copy ALL styles from one element to another, you could do something like this (I have simplified this to support modern browsers only):

var spanElement = document.querySelector('#mySpanElement');
var inputElement = document.querySelector('#myInputElement');
var styles = getComputedStyle(inputElement);
for (var name in styles) {
    spanElement.style[name] = styles[name];
}

You will probably find you want to filter them, or only take a few ones you really want.

Upvotes: 0

Matt Derrick
Matt Derrick

Reputation: 5724

I have only noticed this in Safari on a Mac. In order to make everything display the content as expected you need to override Safaris user agent stylesheet:

font: -webkit-small-control;

can be overridden using this in your reset.css:

button, input, textarea, select, isindex, datagrid {
    font: inherit;
}

I cannot seem to find this in any reset.css but it done the trick for me.

Upvotes: 5

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

There’s no known way you could find out, on your page, which font the browser uses by default. Neither can you specify in CSS that the browser render a span element using whatever font it uses by default for an input element.

But you can make text in span and input elements look the same (with the usual CSS Caveats, of course) by explicitly setting their font-family and font-size, e.g.

input, span { font: 100% Arial, sans-serif; }

In theory, you might need to set other properties too (there is no law against a browser displaying input element contents in blinking purple underlined by default), but this should take care of things in practice. Note that font size setting is needed, because browsers generally use reduced font size (about 90%) for input boxes.

Upvotes: 0

Rob
Rob

Reputation: 15160

The default color for all major browsers for fonts is #000 but you can set it to whatever you want. The font you can set to whatever you want as long as it's on the system viewing it. Those defaults can be found by Googling.

Upvotes: 0

Jakub Januszkiewicz
Jakub Januszkiewicz

Reputation: 4418

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.

Upvotes: 4

Baz1nga
Baz1nga

Reputation: 15579

that is the reason you should reset all the styles at first or use some established css framework like blueprint and avoid reinventing the wheel.

You should probably be overriding any style that you want in your css to aovid browser defaults

Upvotes: 0

Josh Smith
Josh Smith

Reputation: 15028

There is no way to know for sure what default font-size the browser will choose.

You should instead reset the CSS (with Normalize for example) and further style your pages, for example:

span.some-class {
  font-size: 12px;
  color: #333;
}

And then your HTML:

<span class="some-class" id="readOnlyField">data</span>

Upvotes: 0

Related Questions