Firefox 89 has hardcoded blue border on input fields
Categories
(Core :: Widget, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox91 | --- | fixed |
People
(Reporter: peter_bugzilla, Assigned: emilio)
Details
Attachments
(4 files)
blue-border.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0
Steps to reproduce:
Created a simple HTML page with a couple input fields, like this
<html>
<body>
<input type="text" name="test-text"/>
<input type="checkbox" name="test-check"/>
</body>
</html>
Actual results:
Upon focusing the input fields, Firefox surrounds the field with a dark-blue / light-blue border / ring, as can be seen in the attached image.
This seems to ignore most styling put on the field, making previous styled input fields look horrible.
Expected results:
If the browser needs to draw attention to the active field, it should be done in a lot less intrusive way, or at least make this an opt-in accessibility feature, not something that is forced upon a user.
Chrome, for instance, makes the field border 1 pixel larger.
|
Reporter | |
Comment 1•3 years ago
|
||
This might be somewhat related to https://bugzilla.mozilla.org/show_bug.cgi?id=1697150
|
||
Comment 2•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
Assignee | |
Comment 3•3 years ago
|
||
This seems to ignore most styling put on the field, making previous styled input fields look horrible.
Can you elaborate? We only do this for unstyled fields. This is about the focus ring with the non-native-theme, which is like that by design.
|
|
Reporter | |
Comment 4•3 years ago
|
||
input:focus { border: 2px solid #ff0000; }
|
|
Reporter | |
Comment 5•3 years ago
|
||
input:focus { outline: 3px dotted #ff0000; }
|
|
Reporter | |
Comment 6•3 years ago
|
||
If you apply some simple styles, like can be seen in the above attachments, the styling is partly applied to the input fields.
It can't be correct that pages have to specifically overrule both border and outline to have their own design be visible.
I've seen it on plenty sites already where either one or the otber, or both, styles are visible on otherwise styled input elements.
|
|
Assignee | |
Comment 7•3 years ago
|
||
Ok, fair, that's a different thing. comment 4 is using the regular outline-style: auto, which happens to be blue, and is not using the regular form styles, so it's expected.
Comment 5 though I agree it's a bug, we shouldn't be drawing focus outlines if the author specifies one, probably. Let's fix that here.
|
|
Assignee | |
Comment 8•3 years ago
|
||
While this doesn't match traditional Gecko behavior, the non-native
theme has much more opinionated focus outlines so I think this makes
sense.
It also matches Safari and Chrome, afaict.
|
||
Updated•3 years ago
|
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/c97ffb4d1b95 Don't draw native theme focus outlines if the author specifies a non-auto outline. r=mstange
|
||
Comment 10•3 years ago
|
||
Backed out changeset c97ffb4d1b95 (bug 1714524) for causing mochitest failures in test_focusrings.xhtml
Backout link: https://hg.mozilla.org/integration/autoland/rev/26879751a312ee1aecf7a3a377d77c2b56fcf113
Push with failures, failure log.
|
|
Assignee | |
Updated•3 years ago
|
|
||
Comment 11•3 years ago
|
||
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/806def5efd96 Don't draw native theme focus outlines if the author specifies a non-auto outline. r=mstange
|
||
Comment 12•3 years ago
|
||
| bugherder | ||
Description
•