CSS issue with 'outline-color': inconsistent behaviour between browsers

[JohnXLivingston]

Describe the bug

I found some inconsistencies between Firefox And Chrome, concerning the outline-color of textareas.

TL;DR: https://stackoverflow.com/questions/67667161/is-css-outline-color-property-is-not-working-in-firefox-e-g-inputfocus-ou
On firefox, if you don't set outline-style, firefox adds a blue outline.

Here is what i get on my ConverseJS-based chat.

browser	without focus	with focus
Firefox
Chromium

If I add this CSS in firefox:

textarea {
  outline-style: solid;
  outline-width:0px;
}
textarea:focus {
  outline-width:2px;
}

I have something close to the chrome rendering. Just the border has no radius (see bellow).
But adding these rules has the same effects on chromium, and removes the radius effect.

browser	without focus	with focus
Firefox
Chromium

Note: if we don't set outline-width, firefox and chrome have not the same behaviour when the field has not the focus: firefox displays a 1px outline, chrome nothing.

So, i will make a PR adding something consistent on textarea.

[JohnXLivingston]

I think i will make a 1px outline when the textarea has not the focus. I had a user who complained because we can't clearly differenciate the message field: JohnXLivingston/peertube-plugin-livechat#311

[JohnXLivingston]

Here is the PR: #3308

[jcbrand]

Thanks, I've merged your PR manually.

[JohnXLivingston]

Thanks @jcbrand :)