Textarea changing text colour when editing it

Issue

I have a text area

:root {
    --color-back: #000;
    --color-text: #fff;
}

textarea {
    background-color: var(--color-back);
    color: var(--color-text);
}
<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required=""></textarea>

When I’m not editing (i.e. cursor not selected inside the text area), the styling is correct. When I start editing it, the font colour changes. Is this possibly platform dependent and unfixable without some JavaScript, or am I doing something wrong?

Thanks in advance

Solution

There seems to be another style overwriting yours when focusing the textarea.

Editing the :focus pseudo-class of the textarea should solve your problem.

textarea:focus {
    background-color: var(--color-back);
    color: var(--color-text);
}

If the problem continues, verify if there is any *.css or inline styling in your page overwriting yours.

Snippet:

<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required=""></textarea>

<style>
  :root {
    --color-back: #000;
    --color-text: #fff;
  }

  textarea {
    background-color: var(--color-back);
    color: var(--color-text);
  }
  
  textarea:focus {
    background-color: var(--color-back);
    color: var(--color-text);
  }
</style>

Answered By – Zeocadio

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published