Add ability to hide the calendar picker icon when using input control with a type="date"
Categories
(Core :: Layout: Form Controls, enhancement, P3)
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:
- Go to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date in a Firefox browser
- 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
Comment 1•2 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 correct in case you think the bot is wrong.
Comment 2•2 years ago
|
||
(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.
Updated•2 years ago
|
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.
Comment 4•2 years ago
|
||
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
Comment 5•1 year ago
|
||
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.
Comment 6•1 year ago
|
||
Related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1812397
Description
•