Answers by Sentry

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:

<!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>

Loved by over 4 million developers and more than 90,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
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.