CODEWITHSUNDEEP
htmlcssfontstextarea
Alex
Alex

Reputation: 44709

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.

Upvotes: 20

Views: 14309

Answers (1)

AlbertoPL
AlbertoPL

Reputation: 11509

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 *.

Upvotes: 25

Related Questions