Open Bug 1830890 Opened 2 years ago Updated 1 year ago

Add ability to hide the calendar picker icon when using input control with a type="date"

Categories

(Core :: Layout: Form Controls, enhancement, P3)

Firefox 113
enhancement

Tracking

()

People

(Reporter: jmessmer, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Steps to reproduce:

  1. Go to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date in a Firefox browser
  2. Add the following CSS:

input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}

Actual results:

The calendar icon is still visible.

Expected results:

The calendar icon should not be visible. If I execute the same code as above in a Chrome browser, the icon is no longer visible. Both browsers should at minimum provide the same functionality. Please provide an easy way which allows consumers to hide the calendar icon

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Layout: Form Controls
Product: Firefox → Core

(In reply to jmessmer from comment #0)

The calendar icon should not be visible. If I execute the same code as above in a Chrome browser, the icon is no longer visible.

Sure, it's a webkit-prefixed pseudo-element, which is non-standard, so we don't honor it.

Both browsers should at minimum provide the same functionality. Please provide an easy way which allows consumers to hide the calendar icon

Can you elaborate on why would this be useful? In general providing ways to hide the browser controls can be a bit user hostile.

In any case this is a feature request which should probably go to https://github.com/whatwg/html/issues/new, I don't think we want to support webkit-prefixed pseudo-elements.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(jmessmer)
Priority: -- → P3
Summary: The ability to hide the calendar picker icon when using input control with a type="date" → Add ability to hide the calendar picker icon when using input control with a type="date"
Type: defect → enhancement

Emilio, I wouldn't say to use the -webkit-calendar-picker-indicator per say but the ability to provide something similar that chrome is providing in firefox. As of today, there isn't a developer friendly way to hide the calendar and it would very useful because UX designers may not want to use the default calendar icon or at minimum show it at all. In chrome, developers have the ability to use the -webkit-calendar-picker-indicator to hide the icon.

Flags: needinfo?(jmessmer)

I understand there are accessibility concerns with removing the icon all-together, but I believe a more practical use-case is for apps wishing to use their own icons (as is the case for my product). In any case, it'd be helpful to access the shadow elements; even if that means updating the parent shadow element's mode to open.

This is also brought up here: https://bugzilla.mozilla.org/show_bug.cgi?id=1830890

Can you elaborate on why would this be useful? In general providing ways to hide the browser controls can be a bit user hostile.

While it's helpful that Firefox ships with these user controls, not all web browsers do. Website designers cannot rely on clients' browsers for accessibility support, and often write HTML code within their own website for customized user controls and accessibility support.

Regardless, the calendar icon (and other elements injected via shadow DOM by Firefox) should be able be restyled (and/or hidden) so as not to clash with web designers' site styling. For example, I'd like to use my own calendar icon instead of Firefox's.

You need to log in before you can comment on or make changes to this bug.