Member Avatar for SimonIoa

Is it possible to change the default color (blue) supported by browsers when you hover an <option> on a <select>?

  • 2 Contributors
  • 5 Replies
  • 249 Views
  • 54 Minutes Discussion Span
  • Latest Post Latest Post by SimonIoa

Dani AI

Generated

Short answer: not reliably. The blue highlight inside a native <select> dropdown is drawn by the browser/OS widget, so CSS cannot consistently override that hover/selection color across engines. was on the right track — it’s largely an OS/browser thing — and ’s fiddles show why some techniques appear to work in one browser but fail in others.

For a predictable, cross‑browser hover color, replace the native popup with a custom-styled control (a button/div that toggles an absolutely positioned list of items). That gives full control over hover styles, but brings responsibilities: keyboard navigation (Arrow keys, Enter/Space, Esc), ARIA roles and states (role="listbox"/role="option", aria-expanded, aria-selected), focus management, and syncing with a real <select> if native form behavior or graceful fallback is required.

Example (minimal structure and style):

<div class="custom-select" tabindex="0" role="listbox" aria-expanded="false">
  <div class="selected">Choose...</div>
  <ul class="options" aria-hidden="true">
    <li role="option" data-value="1">Option 1</li>
    <li role="option" data-value="2">Option 2</li>
  </ul>
</div>

/* CSS */
.options { display:none; position:absolute; margin:0; padding:0; list-style:none; }
.options li:hover { background:#2b8cff; color:#fff; }

/* JS: toggle .options visible, set aria-expanded/aria-hidden, update .selected and a hidden <select> */

Implementation notes: keep a real <select> in the DOM (visually hidden) and sync its value for form submission and mobile/native fallback; implement full keyboard support and ARIA for screen readers; test on major platforms. If building accessibility from scratch is a concern, consider a well-maintained accessible select library rather than reinventing keyboard/ARIA handling.

Recommended Answers

All 5 Replies

Member Avatar for pritaeas

i found this but it doesnt work for me

Works with my Opera.

Member Avatar for SimonIoa

sorry this is only for texts not for <select>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.