The style of native <select> elements cannot be fully customized, because they are rendered by the operating system, and CSS control is limited; 2. Custom drop-down menus can be built through the HTML div, button and ul structure, styled with CSS, and expanded, selected and closed functions with JavaScript; 3. To improve accessibility, role and aria attributes should be added and keyboard operations should be supported; 4. The alternative is to use the appearance attribute to hide native arrows and add background images, but the option list still cannot be styled and requires compatibility processing; finally, it is recommended to use a custom structure to achieve a consistent aesthetic effect across browsers.

Creating a custom select dropdown with CSS allows you to style the <select></select> element beyond the browser's default appearance, which can be limited and inconsistent across browsers. While you can't fully style the native dropdown arrow or options list in all browsers using just CSS, you can build a highly customized alternative using HTML, CSS, and a bit of JavaScript. Here's how to do it effectively.

1. Why You Can't Fully Style the Native <select></select>

The native <select></select> dropdown is rendered by the operating system, not the browser, so many CSS properties (like background , border-radius , or hiding the dropdown arrow) don't work consistently. To achieve full control, we replace it with a custom-styled element.

2. Build a Custom Dropdown Using Divs and JavaScript

Instead of using <select></select> , create a dropdown using div , button , and ul elements for full styling control.

HTML Structure

 <div class="custom-select">
  <button class="select-btn" onclick="toggleDropdown()">
    Select an option
  </button>
  <ul class="select-options" id="selectOptions">
    <li data-value="option1" onclick="selectOption(this)">Option 1</li>
    <li data-value="option2" onclick="selectOption(this)">Option 2</li>
    <li data-value="option3" onclick="selectOption(this)">Option 3</li>
  </ul>
</div>

CSS Styling

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

.select-btn {
  width: 100%;
  padding: 10px;
  background: #ffff;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  outline: none;
}

.select-btn::after {
  content: '▼';
  float: right;
  font-size: 12px;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.custom-select.active .select-options {
  opacity: 1;
  visibility: visible;
}

.select-options li {
  padding: 10px;
  cursor: pointer;
}

.select-options li:hover {
  background-color: #f0f0f0;
}

JavaScript for Toggle and Selection

 function toggleDropdown() {
  document.querySelector('.custom-select').classList.toggle('active');
}

function selectOption(element) {
  const selectedText = element.textContent;
  document.querySelector('.select-btn').textContent = selectedText;

  // Optional: store selected value
  document.querySelector('.select-btn').setAttribute('data-value', element.getAttribute('data-value'));

  // Close dropdown
  document.querySelector('.custom-select').classList.remove('active');
}

// Close dropdown if clicked outside
window.addEventListener('click', function(e) {
  const select = document.querySelector('.custom-select');
  if (!select.contains(e.target)) {
    select.classList.remove('active');
  }
});

3. Optional: Enhance Accessibility and Usability

For better accessibility:

• Use role attributes ( role="listbox" , role="option" )
• Add keyboard navigation (arrow keys, Enter, Escape)
• Manage focus and ARIA attributes

Example accessibility improvements:

 <button class="select-btn" role="listbox" aria-haspopup="listbox" aria-expanded="false">

Update aria-expanded with JavaScript when opening/closing.

4. Alternative: Style Native Select (Limited)

If you want to keep the native <select> but add some styling:

 .select-native {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('dropdown-arrow.png') no-repeat right center #fff;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 6px;
  cursor: pointer;
}

Note: You still can't style the dropdown options this way, and fallbacks are needed.

Custom dropdowns give full design control and consistent look across devices. While they require a little JavaScript, the result is worth it for polished UIs. Basically, replace <select></select> with a styled div structure and manage interaction via JS.

The above is the detailed content of How to create a custom select dropdown with CSS?. For more information, please follow other related articles on the PHP Chinese website!