DateRangeInput3 has different appearance on different browsers

[jandrew44]

Environment

• Package version(s): @blueprintjs/core: 5.13.0 @blueprintjs/datetime2: 2.3.10 @blueprintjs/select: 5.2.4
• Operating System: Windows 10 Home Edition
• Browser name and version: Google Chrome 130.0.6723.70 Firefox 131.0.3 Microsoft Edge 130.0.2849.56

Code Sandbox

Reproducible on the Blueprint sample page: https://blueprintjs.com/docs/#datetime2/date-range-input3

Steps to reproduce

1. Open the link
2. Switch to dark theme
3. Open month selector

Actual behavior

Note different styles applied in different browsers.

Chrome:

Firefox:

Edge:

Expected behavior

Same component appearance in all browsers.

Possible solution

Can be improved a bit by overriding styles manually. But could not get the same appearance because native structures are being used by DateRangeInput3.

[ggdouglas]

The main issue based on your screenshots appears to be with Firefox, where the undesirable light grey background color on the select element is displayed. This seems to be caused by the .bp5-minimal class applied to the select. The root cause seems to be that Firefox does not support setting alpha transparency or background: none on the background of select elements, leading to the default light grey background color appearing. Here's an isolated reproduction of the bug: https://codepen.io/xgad/pen/poMOpNg

To solve this without breaking the styling of selects in other browsers/OSs, a potential workaround could be to add a special case for the .bp5-html-select element in datepickers. This would override the background color to match the datepicker's background color, and a pseudo element could be used to achieve the semi-transparent hover/focus state.

Alternatively, we could convert the dropdown in the datepicker from a native <select> to our Select component implementation. This would likely provide a cleaner solution overall, as native components are notoriously difficult to style consistently across browsers/OSs. However, there might be some added complexities in converting the dropdown, such as ensuring compatibility with React Daypicker interactions.