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

Fix duplicate calendar icon in Firefox DatePicker

Browse Source 
Chromium's icon is hidden via ::-webkit-calendar-picker-indicator.
Firefox doesn't support that pseudo-element, so the custom Calendar
button now has bg-background + z-[1] to opaquely cover Firefox's
native icon. Removed invalid -moz pseudo-element rules.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-03 03:40:40 +08:00
parent a30483fbbc
commit e9d4ba384f
2 changed files with 3 additions and 1 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} disabled={disabled}
onMouseDown={(e) => e.preventDefault()} onMouseDown={(e) => e.preventDefault()}
onClick={togglePopup} 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-2.5 top-1/2 -translate-y-1/2 rounded p-0.5 bg-background hover:bg-accent/10 transition-colors disabled:opacity-50 z-[1]"
tabIndex={-1} tabIndex={-1}
aria-label="Open calendar" aria-label="Open calendar"
> >

2
frontend/src/index.css
View File

@ -201,9 +201,11 @@ input[type="datetime-local"]::-webkit-calendar-picker-indicator {
} }
/* Hide native picker icon inside DatePicker wrapper (custom icon replaces it) */ /* Hide native picker icon inside DatePicker wrapper (custom icon replaces it) */
/* Chromium: remove the native calendar icon entirely */
.datepicker-wrapper input::-webkit-calendar-picker-indicator { .datepicker-wrapper input::-webkit-calendar-picker-indicator {
display: none; display: none;
} }
/* Firefox: opaque background on the custom icon covers the native one (see date-picker.tsx) */
/* ── Form validation — red outline only after submit attempt ── */ /* ── Form validation — red outline only after submit attempt ── */
form[data-submitted] input:invalid, form[data-submitted] input:invalid,