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