ansaurus

Question

Why <textarea> and <textfield> not taking font-family and font-size from body?

Answer 1

A:

This site seemed to have some code that will point you in right direction.
http://css-tricks.com/creating-a-nice-textarea/

I believe it is because you are not naming your css correctly.

example has textbox tagged as so:
id="styled"
and the css is
textarea#styled {
width: 600px;
height: 120px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
background-image: url(bg.gif);
background-position: bottom right;
background-repeat: no-repeat;
}

So perhaps in your code use the id tag in the text area and describe the css with textarea#YOURID

RandyMorris 2010-05-20 14:48:20

@RandyMorris - "naming your css correctly" where....? My question is not how to make stylish `<textarea>`

metal-gear-solid 2010-05-20 14:51:17

I added some example :D It would be better but I am on my way out the door to work and I could not get stuff to format well. Hit me up if does not make sense.

RandyMorris 2010-05-20 15:01:10

I think you are not understanding my question

metal-gear-solid 2010-05-20 15:24:37

Answer 2

+1 A:

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.

BoltClock 2010-05-20 15:07:39

Answer 3

A:

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

nickf 2010-05-20 15:11:56

but <h1> is taking font styling from `<body>` but `<textarea>` not

metal-gear-solid 2010-05-20 15:13:33

The styles for `h1` don't define a font, therefore your `body` styles take precedence. The styles for `input` does define a style, and it is more specific than your selector, so it wins.

nickf 2010-05-20 15:17:45

+1 for your comment . I wasn't aware. you mean some elements has specfic style by default in browser and cannot be override by body {....}

metal-gear-solid 2010-05-20 15:20:32

Answer 4

+1 A:

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

spoulson 2010-05-20 15:14:41

+1 Hmmmm it's working in FF now but not in IE 6 and 7.

metal-gear-solid 2010-05-20 15:17:37

IE prior to version 8 doesn't support inherit, so that won't work.

DisgruntledGoat 2010-05-20 15:17:46

I think this is only cross browser solution to define every element`body, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }`

metal-gear-solid 2010-05-20 15:22:02

I agree, that approach is more practical. I just wanted to demonstrate the behavior you were seeing by using the `inherit` approach.

spoulson 2010-05-20 17:04:46

ansaurus

tags:

views:

answers:

Why <textarea> and <textfield> not taking font-family and font-size from body?

related questions