Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Color theme setting ignored by the menu of a <select> element in mobile browsers #40795

Open
3 tasks done
andreimilto opened this issue Sep 5, 2024 · 1 comment
Open
3 tasks done

Color theme setting ignored by the menu of a <select> element in mobile browsers #40795

andreimilto opened this issue Sep 5, 2024 · 1 comment
Labels
css docs

Comments

@andreimilto
Copy link

Prerequisites

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

DesktopDarkDesktopLight

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

MobileDarkMobileLight

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

  1. 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>
  1. Set the color theme to dark and check how <select>'s menu is displayed in desktop and mobile browsers:
<html data-bs-theme="dark">
  1. Set the color theme to light and 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
@MohamadSalman11
Copy link
Contributor

Hi @andreimilto , changing the color of a element in mobile browsers is tricky. Mobile browsers use their own default styles, which often override custom CSS. This makes it hard to change the look of the dropdown menu. The best option for now is to create a custom select dropdown using HTML, CSS, and JavaScript, which will give you full control over the design. Hopefully, there will be an easier solution for this in the future!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css docs
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@julien-deramond @andreimilto @MohamadSalman11