How can I ensure that a textarea matches the font style of the rest of my webpage?
Here is the code I am currently using:
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;}
In Mozilla, the font inherits correctly, but in IE7 it keeps Courier inside the textarea.
UPDATE: It seems inherit does not work in IE for textarea, so I will follow AlbertoPL's suggested method instead.