twbs
Color theme setting ignored by the menu of a <select> element in mobile browsers
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
I have a <select> element. And I've set the color theme on the <html> element using data-bs-theme attribute.
In desktop browsers (Chrome, Edge, Safari, Firefox) the <select> is displayed correctly:
✅dark theme - dark <select>'s menu
✅light theme - light <select>'s menu
In mobile browsers (Chrome, Safari, Firefox) the menu of the <select> element seems to always be drawn according to the system's color theme, completely ignoring the data-bs-theme setting:
✅dark theme - dark <select>'s menu
❌light theme - dark <select>'s menu
I'm wondering if it can be fixed, or if it's the limitation of the browsers that cannot be overcome.
If latter, then it would be useful to have the documentation on color modes stating this limitation - save developers the trouble of figuring this out and preventing situations similar to the described one from happening in the first place🙌
Reduced test cases
- Add
<select>element:
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
- Set the color theme to
darkand check how<select>'s menu is displayed in desktop and mobile browsers:
<html data-bs-theme="dark">
- Set the color theme to
lightand check how<select>'s menu is displayed in desktop and mobile browsers:
<html data-bs-theme="light">
What operating system(s) are you seeing the problem on?
Android, iOS
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox
What version of Bootstrap are you using?
v5.3.3
Correct these elements aren't great at custom styles. New select element is on the horizon though that could help, unsure about mobile for those though.
