-
-
Notifications
You must be signed in to change notification settings - Fork 810
Description
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.







