ggdouglas
commented
3 weeks ago 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.
Environment
Code Sandbox
Reproducible on the Blueprint sample page: https://blueprintjs.com/docs/#datetime2/date-range-input3
Steps to reproduce
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.