Sentry Answers>CSS>

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

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

Richard C.

—

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

Unfortunately, as of 2023, there is still no solution to styling a dropdown completely and consistently. For a detailed guide on styling form elements, please read the MDN documentation.

All this article can do is demonstrate the limited CSS options currently available.

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:

Click to Copy
<!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>
  • Syntax.fmHasty Treat - CSS Grid Masonry (Grid Level 3)
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fmHasty Treat - CSS Grid Level 2 aka Subgrid
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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 sentryjoin our discord
© 2025 • Sentry is a registered Trademark of Functional Software, Inc.