textarea changing text colour when editing it-CodePudding

I have a text area

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

with the style

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

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

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 dependant and unfixable without some js, or am I doing something wrong?

Thanks in advance

CodePudding user response：

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>