Textbox Color

This page demonstrates textbox color and how to apply color to your HTML textboxes.

HTML textboxes are input fields created by the <textarea> element. You can use the CSS background-color and color properties to add color to your textboxes.

Textbox Background Color

To apply background color to your textbox, use the CSS background-color property. Example:

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="background-color:#FCF5D8;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Text Color

To change the text color (i.e. the text inside the textbox), use the CSS color property. Example:

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="background-color:#FCF5D8;color:#AD8C08;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Textbox Border Color

To change the border color, use the CSS border property. You will also need to specify the width of the border and the style. Example:

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="background-color:#FCF5D8;color:#AD8C08;border:3px solid #AD8C08;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

About HTML Colors

The above examples use "hexadecimal values" to define the color. These are the number/letter combinations that begin with a # symbol. Hexadecimal (or just "hex") values aren't the only way of defining color in HTML. You can also use the RGB decimal equivalent or the color name.

For example, if you change the textbox background color to say, blue, you could specify any one of the following: background-color:blue;, background-color:#0000FF;, background-color:rgb(0,0,255);. Actually, you can also use hex shorthand, which would be background-color:#00F;.

For more information about applying color in HTML, see HTML color. Also check out these color scheme combinations to choose a color that's right for you.