Hey there! I totally get how frustrating it is when you're trying to tweak that tiny UI detail and just can't get it to stick—especially with <select> elements, since they're notoriously tricky to style consistently across browsers. Let's break down why your hover color isn't working and how to fix it.

Why Native <select> Hover Styles Fail #

Most browsers treat the dropdown list of a native <select> as a system-level control, not a regular HTML element. That means many CSS properties (including :hover backgrounds) get ignored or overridden by the browser's default styles. Even if you find a hack that works for one browser, it might break another.

Solutions to Try #

1. Use a Custom Dropdown Component (Most Reliable) #

The best way to get full control over hover styles is to build a custom dropdown using basic HTML/CSS/JS instead of relying on the native <select>. Here's a quick example:

HTML

<div class="custom-select">
  <div class="select-trigger">Choose an option</div>
  <div class="options-container">
    <div class="option">First Option</div>
    <div class="option">Second Option</div>
    <div class="option">Third Option</div>
  </div>
</div>

CSS

.custom-select {
  position: relative;
  width: 220px;
  font-family: Arial, sans-serif;
}

.select-trigger {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  background-color: white;
}

.options-container {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.custom-select.active .options-container {
  display: block;
}

.option {
  padding: 10px 15px;
  cursor: pointer;
}

.option:hover {
  background-color: #f0f8ff; /* Your desired hover color */
}

JavaScript (to toggle the dropdown)

const trigger = document.querySelector('.select-trigger');
const customSelect = document.querySelector('.custom-select');

// Toggle dropdown on trigger click
trigger.addEventListener('click', () => {
  customSelect.classList.toggle('active');
});

// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
  if (!e.target.closest('.custom-select')) {
    customSelect.classList.remove('active');
  }
});

This approach lets you style every part of the dropdown exactly how you want, including hover states, without browser inconsistencies.

2. Browser-Specific Hacks (Limited Use) #

If you really need to stick with the native <select>, here are some browser-specific tricks that might work (note: these can break with browser updates):

• WebKit Browsers (Chrome/Safari):

  select option:hover {
    background-color: #your-color !important;
  }
  

  Sometimes you also need to add -webkit-appearance: none; to the <select> element to disable some default styles, but results vary.

• Firefox:
  Firefox has very limited support for styling <select> options. You can try using ::-moz-listbox-item, but it's not fully reliable:

  select::-moz-listbox-item:hover {
    background-color: #your-color !important;
  }
  

Final Notes #

If you've tried these and still have issues, feel free to share the exact CSS you've tested and which browsers you're targeting—more context will help narrow down the problem!

内容的提问来源于stack exchange，提问作者Mr Nobody