Styling of date input makes today look invalid when using min/max attributes
Categories
(Core :: Layout: Form Controls, defect)
Tracking
()
People
(Reporter: simon.andrews, Unassigned)
Details
Attachments
(2 files)
datepicker.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:120.0) Gecko/20100101 Firefox/120.0
Steps to reproduce:
Create an input date field with a max value set to today's date.
<input type="date" max="2024-01-02">
Navigate to an earlier date (eg yesterday) then reopen the picker
Actual results:
The current date and all future dates are styled identically, making it appear that the current date is not a valid selection, even though it is, and if you click on it it will work. (see attached screenshot)
As well as the visible styling the cursor shape is also confusing since you get a text selection cursor when hovering over the calendar even though the popup is not a text selection.
Expected results:
Invalid dates should be styled differently to the current date so it's obvious which dates are able to be selected.
The cursor should also be different when hovering valid and invalid dates, and should not be a text input shape.
|
||
Comment 1•1 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•1 years ago
|
||
Thanks for the bug report!
The current date and all future dates are styled identically,
This is true regarding the background at least. More-specifically:
- the current date seems to always be styled with bold text and with a special background-color
- invalid dates are styled with the same special background-color
These two things are always true, and in some cases the reuse of that same background-color might not be confusing (e.g. if the current day is nowhere close to the range of invalid days), but they're quite confusing when the current day is adjacent to the range of invalid days.
|
|
||
Comment 3•1 years ago
•
|
||
This is only an issue with the default "light" theme. With the dark theme, we use a different background-color for the current day vs. for invalid days.
Here's a data URI testcase using today's date (you may want to edit max to match your current date if you're viewing this in the future):
data:text/html,<!DOCTYPE html><input type="date" max="2024-01-08">
I'll post screenshots of how this looks with the light vs. dark theme.
|
|
||
Comment 4•1 years ago
•
|
||
Here's the light vs. dark choice for "Website appearance" in preferences.
In both cases, the background-color is actually different between current-day vs. invalid-days, but for the light theme it's so close as to be visually indistinguishable, given that the two backgrounds aren't directly overlapping.
With the light theme, the current day's background is rgb(178,178,178) whereas invalid days are rgb(199,199,199) -- both of them shades of light-gray, in the same ballpark, only a little bit darker than the default background which is white i.e. rgb(255,255,255)
With the dark theme, the current day's background is lighter-than-the-default, whereas invalid days are darker-than-the-default, which makes them trivially easy to distinguish.
(We can't quite match this pattern for the light theme because we can't really go "lighter than the default" there, given that the default background is white. But we can definitely try to make them easier to distinguish.)
Description
•