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