To style a native dropdown, use CSS properties like padding, border-radius, and appearance: none to remove default styling, while adding a custom arrow via background-image and ensuring accessibility and cross-browser compatibility. 2. For full control, create a custom dropdown with HTML, CSS, and JavaScript using a button and a positioned list, where JavaScript handles toggling visibility, updating selection, and closing on outside clicks, while also implementing keyboard navigation and ARIA roles for accessibility. 3. Alternatively, use CSS frameworks like Tailwind or Bootstrap that provide pre-styled, responsive dropdown components which can be easily customized and enhanced with minimal code. Always prioritize usability, mobile-friendliness, and accessibility when implementing either approach.

Styling a dropdown menu can make your website look more polished and improve user experience. Here’s how to do it effectively using HTML and CSS — whether you're working with a simple <select></select> element or a custom dropdown.

1. Style a Native <select></select> Dropdown

The native dropdown (<select></select>) is accessible and functional by default, but it can look outdated. You can style it with CSS, though cross-browser consistency is tricky.

<select class="custom-select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

.custom-select {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: white;
  width: 200px;
  appearance: none; /* Removes default styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg xml;utf8,<svg fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: pointer;
}

Key Tips:

• Use appearance: none to remove the default arrow (but remember to add a custom one via background image).
• Always test in multiple browsers — Safari and Firefox may still show default styles.
• Keep accessibility: ensure focus states and keyboard navigation still work.

2. Create a Fully Custom Dropdown with HTML/CSS/JS

For more control, build a custom dropdown using div, button, and ul.

<div class="dropdown">
  <button class="dropdown-toggle">Choose an option ▼</button>
  <ul class="dropdown-menu">
    <li class="dropdown-item">Option 1</li>
    <li class="dropdown-item">Option 2</li>
    <li class="dropdown-item">Option 3</li>
  </ul>
</div>

.dropdown {
  position: relative;
  display: inline-block;
  width: 200px;
}

.dropdown-toggle {
  width: 100%;
  padding: 10px;
  text-align: left;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f4f4f4;
}

.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

const dropdown = document.querySelector('.dropdown');
const toggle = document.querySelector('.dropdown-toggle');
const items = document.querySelectorAll('.dropdown-item');

toggle.addEventListener('click', () => {
  dropdown.classList.toggle('active');
});

// Optional: close dropdown when clicking outside
document.addEventListener('click', (e) => {
  if (!dropdown.contains(e.target)) {
    dropdown.classList.remove('active');
  }
});

// Update button text when an item is clicked
items.forEach(item => {
  item.addEventListener('click', () => {
    toggle.textContent = item.textContent;
    dropdown.classList.remove('active');
  });
});

Advantages:

• Full design control (colors, fonts, animations, icons).
• Can include images, dividers, or search input.
• Works consistently across browsers.

Accessibility Notes:

• Add role="listbox", role="option" for screen readers.
• Use keyboard events (ArrowDown, Enter, Escape) for navigation.
• Manage focus properly.

3. Use CSS Frameworks (Optional)

If you're using libraries like Bootstrap, Tailwind CSS, or Material UI, they offer pre-styled dropdowns.

Example with Tailwind:

<div class="relative inline-block">
  <button class="bg-white border border-gray-300 rounded-lg px-4 py-2 w-48 text-left">
    Select Option
  </button>
  <ul class="absolute mt-1 w-48 bg-white border border-gray-300 rounded-lg shadow-lg z-10 hidden">
    <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 1</li>
    <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">Option 2</li>
  </ul>
</div>

Then add JavaScript to toggle visibility.

Final Tips

• Keep it simple: Don’t over-style — clarity matters more than flashiness.
• Mobile-friendly: Ensure tap targets are large enough (at least 44px).
• Test accessibility: Use screen readers and keyboard-only navigation.
• Avoid disabling native behavior unless you’re replacing it properly.

Basically, you can either lightly style the native <select></select> or build a custom one — the latter gives more flexibility but requires more care.

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