textarea doesn't inherit css color form parent element

Question

I have a textarea inside a div. The div css sets the color, but the textarea doesn't seem to react to that.

Is this the correct behavior ? how can I get the color property to apply from the div to the textarea ?

here is an example

.c1 {
  color: red;
}

<div class="c1">
  An now for something completly different :<br/>
  <textarea>
          the news : spam spam spam spam spam
        </textarea>
</div>

Answer 1

Textarea will not inherit until you mark it so

.c1 textarea{
    color:inherit;
}

So you can apply color for both div child and textarea fields. If I am not mistaking input tag also does not inherit color by default

Answer 2

It's because textarea has default style applied by the browser so the inheritance will not work:

You need to specify a color for the textarea or use inherit to get the color of the div

.c1 {
  color: red;
}
textarea {
 color:inherit;
}

<div class="c1">
  An now for something completly different :<br/>
  <textarea>
          the news : spam spam spam spam spam
        </textarea>
</div>

Answer 3

Please try below CSS.

.c1,textarea.classname {color:red;}

Answer 4

Try this CSS Code

.c1,textarea {  
    color:red;  
}

Answer 5

Browsers gives default styles to inputs, buttons,... So Textarea have color:initial set. You need to specify in your code the color for Textarea.

.c1,
textarea{
  color:red;
}