rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Firefox double calendar icon with opaque cover button

Browse Source 
@-moz-document url-prefix() was dead since Firefox 61 and
-moz-appearance: textfield has no effect on date inputs.
Firefox has no CSS pseudo-element for the date picker icon.

Fix: custom Calendar button resized to a full-height w-9 panel
with bg-background + rounded-r-md that completely occludes
Firefox's native icon underneath. Chromium still uses
::-webkit-calendar-picker-indicator to remove its native icon.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-03 03:53:36 +08:00
parent 01aed12769
commit db2ec156e4
2 changed files with 4 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/ui/date-picker.tsx
View File

@ -464,7 +464,7 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
disabled={disabled}
onMouseDown={(e) => e.preventDefault()}
onClick={togglePopup}
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-accent/10 transition-colors disabled:opacity-50"
className="absolute right-px top-px bottom-px w-9 flex items-center justify-center rounded-r-md bg-background hover:bg-accent/10 transition-colors disabled:opacity-50"
tabIndex={-1}
aria-label="Open calendar"
>

11
frontend/src/index.css
View File

@ -205,14 +205,9 @@ input[type="datetime-local"]::-webkit-calendar-picker-indicator {
.datepicker-wrapper input::-webkit-calendar-picker-indicator {
display: none;
}
/* Firefox: -moz-appearance: textfield strips all native chrome including the calendar icon.
This is safe because the DatePicker component provides its own custom popup. */
@-moz-document url-prefix() {
.datepicker-wrapper input[type="date"],
.datepicker-wrapper input[type="datetime-local"] {
-moz-appearance: textfield;
}
}
/* Firefox: No CSS pseudo-element exists to hide the native calendar icon.
The custom button covers the native icon zone with a solid background so
only one icon is visible regardless of browser. */
/* ── Form validation — red outline only after submit attempt ── */
form[data-submitted] input:invalid,