How do I style a <select> dropdown with only CSS?

Richard C. —
jump to solution

The Problem

It’s useful to style your HTML dropdowns (<select> elements) to improve usability by improving their clarity and aligning their visual consistency with your brand. You might want to do this without using JavaScript for users who don’t have JavaScript enabled, to improve CPU performance and reduce complexity, or to retain the accessibility of a dropdown instead of replacing it with a JavaScript component.

Historically, browsers rendered dropdowns using their own user interface rendering system, not the standard document rendering system that handles HTML and CSS. This isn’t the Shadow DOM, which also involves a separate DOM tree that is not affected by the styles and scripts of the main document, but a similar concept. Modern browsers allow more styling options for form elements but customization is still difficult and inconsistent across browsers.

The Solution

Historically, there was no way to style a dropdown completely and consistently across browsers. As of Chrome 135 (April 2025), Chromium-based browsers support the appearance: base-select CSS property, which lets you fully style both the select button and its dropdown picker with plain CSS. Firefox and Safari are still implementing this feature, so for cross-browser support you still need the fallback approach below. For a detailed guide on styling form elements, read the MDN documentation and Chrome’s guide to customizable select elements.

The rest of this article demonstrates the limited but universally-supported CSS options that work across all browsers.

The things we can change are:

  • fonts and colors
  • border, margins, and padding
  • outlines and shadows

We can remove the dropdown arrow from the menu, but not replace it with anything.

The <option> elements shown when you open the dropdown cannot be styled in any way. So if you style the menu button, it will look inconsistent with all its children.

Below is commented code demonstrating what you can change about the select button:

<!DOCTYPE html>
<html lang="">
  <head>
    <style>
      select {
        appearance: none; /* remove default appearance set by the browser */
        outline: none; /* remove the outline shown on focus */
        cursor: pointer; /* change the mouse cursor icon */

        color: navy;  /* text color */
        background-color: lightblue;
        border: 2px solid blue;

        border-radius: 5px;  /* round the border corners */
        padding: 5px 10px;
        width: 200px;
        height: 40px;
        box-shadow: 5px 8px 5px rgba(0, 0, 0, 0.8);

        font-family: serif;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }

      select:focus {
        outline: 2px dashed red;  /* replace the focus outline removed with 'outline: none' */
      }
    </style>
  </head>
  <body>
    <select>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  </body>
</html>

More CSS content

Related Answers

I need an unordered list without any bullets (HTML, CSS)
Matthew C. —
How to make a div 100% height of the browser window?
Matthew C. —
How do I overlay one div over another div?
Matthew C. —
How to style a checkbox using CSS
Matthew C. —

Considered "not bad" by 4 million developers and more than 150,000 organizations worldwide, Sentry provides code-level observability to many of the world's best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentry join our discord
Sentry