Skip to content

Commit 7d96bc9

Browse files
fix: add base styles for month/year select dropdowns
Add styling for .react-datepicker__month-select, .react-datepicker__year-select, and .react-datepicker__month-year-select elements which were previously unstyled. The new styles use: - transparent background to inherit from parent (works with dark/light themes) - color: inherit to match the parent's text color - consistent border, border-radius, and font styling - focus-visible outline for accessibility This fixes issues where the native <select> elements would display with browser default styling, which looked bad especially in dark mode themes. Fixes #5786 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 9e4795d commit 7d96bc9

1 file changed

Lines changed: 17 additions & 0 deletions

File tree

src/stylesheets/datepicker.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,23 @@
149149
margin: 0 15px;
150150
}
151151

152+
.react-datepicker__month-select,
153+
.react-datepicker__year-select,
154+
.react-datepicker__month-year-select {
155+
background-color: transparent;
156+
border: 1px solid $datepicker__border-color;
157+
border-radius: $datepicker__border-radius;
158+
color: inherit;
159+
cursor: pointer;
160+
font-family: inherit;
161+
font-size: inherit;
162+
padding: 2px;
163+
164+
&:focus-visible {
165+
outline: auto 1px;
166+
}
167+
}
168+
152169
.react-datepicker__current-month,
153170
.react-datepicker-time__header,
154171
.react-datepicker-year-header {

0 commit comments

Comments
 (0)