Textarea background color

A text area in HTML, by default, it does not have any color associated with it. Using CSS we have the possibility of modifying the background color of the
textarea
, as well as the color of the text that will go inside the mass. So, in this example, we are going to see step by step how to define the background color of the textarea.

To be able to modify the background color of the
textarea
we must rely on the attribute
background-color
from CSS and associate it with the
textarea
from HTML. The attributes CSS are applied using the attribute style
from HTML.

<textarea cols="48" rows="3" style="css_attributes;">Text of the text area.
</textarea>

Now we will only have to give it a color value, in RGB format at attribute background-color
. For example, if we want the background to be red we will assign it the value #f00, or blue with #00f,…

The line of code that will allow us to make this assignment will look like this:

<textarea cols="48" rows="3" style="background-color: #87CEEB;">
Text area text. Background with color.
</textarea>

Let’s see what the effect looks like when viewing a text area with the background color changed:

To modify the color of the text you must manipulate the attribute
color
and assign RGB values ​​to it in the same way. Let’s see the line of code how it would be applied in the attribute style
:

<textarea cols="48" rows="3" style="background-color:#87CEEB;color:#0000ff;">
Text area text. Background and text with color.
</textarea>

And how does it look like having changed the background color and the text inside the
textarea
:

As you have seen, it is very simple to define the background color of the textarea and put both the background and the text within the colors that we like the most.

Leave a Comment