Skip to content

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

@JohnXLivingston

Description

@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 image image
Chromium image image

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 image image
Chromium image image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions