How do I get an HTML Text Area with monospaced text using CSS?

Question

This may be a dumb noob question, but I can't figure out how to make my text area use a monospaced font.

Answer 1

If I'm understanding properly, it should already inherit default user-agent styles, but if you want to explicitly, just specify a font-family ( styles jacked from Stackoverflow stylesheet )

textarea {
  border:1px solid #999999;
  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}

Specify the more specific (monospace-specific) font families first, and if the user agent doesn't have that available it will keep trying them until the end, in which case it would default to the default user agent font family for that element, if any was specified.

Answer 2

Just use a monospace font. For example for something like:

<textarea id="mytextarea"></textarea>

the css would be:

#mytextarea {
    font-family: monospace;
}

If you want to use a specific monospace font, you can but don't forget adding the generic 'monospace' at the end in case the user does not have your preferred font installed:

#mytextarea {
    font-family: 'DejaVu Sans Mono', monospace;
}

Answer 3

You can also use the standard generic font-family: monospace, but be careful -- there are some severe side effects (sadly) in Chrome, Safari and anything WebKit based.

see:

• http://webkit.org/blog/67/strange-medium/
• http://archivist.incutio.com/viewlist/css-discuss/103606

Answer 4

textarea
{
font-family: monospace;
}

You may need to add an important if not working

textarea
{
font-family: monospace !important;
}