Font consistency in a textarea

views:

827

answers:

+7 Q:

Font consistency in a textarea

How do I make a textarea have the same font as everything else on the webpage?

Currently I have my code:

test.html:

    <html>
      <head>
        <link rel="stylesheet" href="test.css">
      </head>
    <body>
        <div id="testarea">
          <textarea></textarea>
        </div>
    </body>
    </html>

test.css:

    body { font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}
    #testarea textarea { width: 30em;height: 7em;font: inherit;}

Font inherits in Mozilla, but IE7 keeps Courier inside the textarea.

UPD: Apparently inherit does not work in IE for textarea, so I'll go with AlbertoPL's method.

+5 A:

Simply create a textarea element and define your font element there.

textarea { font: 100%/120% Verdana, Arial, Helvetica, sans-serif;}

you can move it out of the body element.

You'll have to define the font twice (once in body and once in textarea) if you don't want to use *

AlbertoPL 2009-05-13 02:19:11

That'd work, but there's apparently a fair amount of overhead involved in applying a style to everything via *

da5id 2009-05-13 02:25:04

Defining font twice will also definitely work, but why won't font: inherit work? Like I said, I can't test atm, but I'm 99% certain that's not what I did...

da5id 2009-05-13 02:40:00

I'm going to guess that IE7 simply does not inherit correctly, which is a shame.

AlbertoPL 2009-05-13 02:53:36

That'd be right :/

da5id 2009-05-13 03:01:06

Eric Meyer removed the 'inherit' values from his famous CSS reset after realizing that IE does not support it properly http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

Andy Ford 2009-05-13 05:57:00

ansaurus

tags:

views:

answers:

Font consistency in a textarea

related questions