Closed Bug 1641978 Opened 1 year ago Closed 1 year ago

Reset button on input[type=date] should inherit color

Categories

(Core :: Layout: Form Controls, defect)

63 Branch
defect

Tracking

()

RESOLVED FIXED
mozilla79
Tracking Status
firefox-esr68 --- wontfix
firefox76 --- wontfix
firefox77 --- wontfix
firefox78 --- wontfix
firefox79 --- fixed

People

(Reporter: me, Assigned: heycam)

References

(Regression)

Details

(Keywords: regression)

Attachments

(2 files)

Example: https://jsfiddle.net/silverwind/j716y8tm/

A simple fix could be this in toolkit/content/widgets/datetimebox.css:

.datetime-reset-button {
  color: inherit;
}

I don't know why it does not inherit by default, might be something shadow-dom specific.

Attached image example rendering

This is a regression from bug 1317581.

Severity: -- → S3
Version: Trunk → 63 Branch

(In reply to silverwind from comment #0)

A simple fix could be this in toolkit/content/widgets/datetimebox.css:

.datetime-reset-button {
  color: inherit;
}

I don't know why it does not inherit by default, might be something shadow-dom specific.

It's because the button matches a rule from the UA style sheet that sets color: buttontext.

I didn't realize that the reset button is rendered as a single SVG path with opacity. I'm not sure if that is the desired appearance (i.e. something that adapts to the color of the text), but if it is, then your fix is correct.

Assignee: nobody → cam
Status: NEW → ASSIGNED
Attachment #9152909 - Attachment description: Bug 1641978 - Fix reset button color on datetime inputs. → Bug 1641978 - Fix reset button appearance on datetime inputs.
Pushed by cmccormack@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/427465df9327
Fix reset button appearance on datetime inputs. r=jaws
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla79

I'm not sure if that is the desired appearance (i.e. something that adapts to the color of the text), but if it is, then your fix is correct.

I think it's generally desirable that these indicators follow the text color to give authors some leverage over its color which is important for dark themes where black on near-black will not give sufficient contrast. Notably, Blink also seems to have the same issue with the date icon on the same fiddle.

Ideally, I'd like to see a way for authors to style these elements. I think it could be done by exposing Shadow-DOM parts using <button part="reset-button"> that authors can then target using input[type="date"]::part(reset-button).

(In reply to silverwind from comment #7)

Ideally, I'd like to see a way for authors to style these elements. I think it could be done by exposing Shadow-DOM parts using <button part="reset-button"> that authors can then target using input[type="date"]::part(reset-button).

Yes, I think some way of styling the reset button -- or inserting your own into an unstyled control -- is needed. Discussion about stylability of form controls is happening as part of https://github.com/WICG/open-ui.

The patch landed in nightly and beta is affected.
:heycam, is this bug important enough to require an uplift?
If not please set status_beta to wontfix.

For more information, please visit auto_nag documentation.

Flags: needinfo?(cam)

Not important enough.

Flags: needinfo?(cam)
You need to log in before you can comment on or make changes to this bug.