Why <textarea> and <textfield> not taking font-family and font-size from body?
CssXhtmlCss Problem Overview
Why Textarea and textfield not taking font-family and font-size from body?
See live example here http://jsbin.com/ucano4
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>texearea font</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}
</style>
</head>
<body>
<form action="" method="get">
<textarea name="" cols="20" rows="4"></textarea>
<input name="" type="text" />
</form>
<p>some text here</p>
</body>
</html>
If it's a usual behavior then should i write in css like this. i need same style in all
body,textarea,input {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}
And how many other elements in XHTML which will not take font styling from body {....}?
Css Solutions
Solution 1 - Css
Certain controls are not defaulted to inherit font settings. You can override this by place this in your CSS:
textarea {
font-family: inherit;
font-size: inherit;
}
Solution 2 - Css
By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using.
You'll have to target the form elements themselves if you want to change their font/text styles - should be easy enough by selecting them though, as you've just done.
As far as I know, only form elements are affected. Off the top of my head: input, button, textarea, select.
Solution 3 - Css
All browsers have built-in default stylesheets. That's why, when you make a page without any styles defined at all, <h1> tags are large and bold, and <strong> makes text bold. Similarly, the font styles for <input> and <textarea> elements are defined in the default styles.
To see this stylesheet in Firefox, put this into your address bar: resource://gre/res/forms.css
Anyway, you have to override these styles as you would any other styles like you did in that last example.
In case you're wondering what other styles are defined, check out the CSS files in your resources. You can access them via the url above, or by looking in your res folder in the firefox directory (eg: c:\program files\mozilla firefox\res). These are the ones which may be affecting the styles of normal pages:
- html.css
- forms.css
- quirk.css
- ua.css
Solution 4 - Css
I think what he means is some elements are more specific than others in the DOM, or have a smaller scope. Since a textarea exists inside the body, any style defined for textarea will overwrite body{} styles. So FF's default textarea style overwrites your body style, even though yours is defined later (usually something more recent will take precedence, but not if it's in a broader scope/less specific).
Solution 5 - Css
I tried all sorts of tricks to stop textarea in mobile using a much larger font than the normal text. It seems that when my textarea was cols="45" the font was normal but as soon as it was raised to cols="71", even though it stayed inside the td tags the font grew large.
On the mozilla page ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) I found this
textarea {
text-size-adjust: none;
}
It seems to the best answer for me. It works on PC, tablet and, most importantly, on my android phone.