Setting CSS color on buttons leads to unreadable text with a dark desktop theme



6 months ago
a month ago


(Reporter: punx665, Unassigned)


Firefox 61

Firefox Tracking Flags

(Not tracked)




(1 attachment)



6 months ago
Posted image kKtopAC.png
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180807170231

Steps to reproduce:

just use any dark GTK theme that uses dark buttons/entrys and bright/white text and then go to a site with HTML-forms.

Actual results:

black text on black buttons, entrys etc.

Expected results:

look at the screenshot Chrome use internal styling which avoids all those issues


6 months ago
Component: Untriaged → Widget: Gtk
OS: Unspecified → Linux
Product: Firefox → Core
Hardware: Unspecified → x86_64
The problem is caused by this CSS rule:

input, textarea, button, select, optgroup, option {
	font: inherit;
	color: inherit;
	line-height: 1;
	margin: 0;
	vertical-align: middle;

line 7144

The inherited color value is apparently black.

If they remove the color declaration then it should work - you'll get
the theme's color instead.  Or, they could also set the background,
depending on what they want.  It's generally considered a bug to
set one of color/background but not the other since it leads to
exactly this issue.  I would strongly recommend to not try to style
form controls *at all* since the default style is generally what
the user expects.
Component: Widget: Gtk → Desktop
Product: Core → Tech Evangelism
Summary: Firefox 61 is still unusable on X11 with a dark desktop theme → Setting CSS color on buttons leads to unreadable text with a dark desktop theme
Version: 61 Branch → Firefox 61
Looking into why this is OK in Chrome:

input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;

For us, we define background-color as -moz-Field:

I see that Fennec decided to define that as #fff:

Mats, should we consider something similar for desktop?
Flags: needinfo?(mats)
Priority: -- → P3
I don't think we should, no.  It's inherently a bug in the author's CSS
if they specify just one of color/background.  They MUST always specify
both (or neither) to avoid rendering white-on-white etc.  I would
strongly recommend that they don't style form controls *at all*.
That's the best for the user since they are more recognizable as
form controls when they have their default appearance.

However, now that CSS supports querying for "dark mode" it should be
a little easier for web sites to opt-in to the mode the user is using
on their platform (once browsers implement this).
(Note that this means that authors should still *not* style form
controls, but the author can now style *other* elements so that
it matches a light/dark theme).
Flags: needinfo?(mats)
see Also Bug 1435665
There's an issue with the current color of Background color for buttons, which needs to be fixed.
Component: Desktop → Desktop
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.