How do I style a `` dropdown with only CSS?

html

responsive-design

css-variables

pseudo-elements

byAnton Shumikhin·Feb 13, 2025

To style your <select> dropdown only with CSS, play around with properties like appearance, background, border, and padding to create an elegant style. Enhance user experience with :focus state styling. Refer to this example:

select.custom-select {
  background: #f0f0f0 url('dropdown-arrow.svg') no-repeat right 10px center;
  border: 1px solid #ccc;
  padding: 5px 30px 5px 10px; /* Space for arrow image */
  border-radius: 4px;
  -webkit-appearance: none; /* Just Safari things */
  -moz-appearance: none;    /* Because Firefox also matters */
  appearance: none;         /* Rest of the gang */
}

select.custom-select:focus {
  border-color: #5b9bd5;
}

Apply this CSS class custom-select to your select HTML element:

<select class="custom-select">
  <option>Option 1</option>
  <!-- More options -->
</select>

This CSS snippet provides a clean custom-styled dropdown, replacing default browser styles.

Managing overflowing text

Long text options can disrupt the beauty of your dropdown. Use text-overflow: ellipsis; for damage control:

select.custom-select {
  /* ... */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; /* Don't let that pesky text escape! */
}

Battling cross-browser inconsistencies

To create a consistent dropdown across different browsers, apply the appearance property and verify compatibility using caniuse.com and IE hacks:

/* Applying special treatment for IE10+ */
select::-ms-expand {
  display: none;
}

/* And extra pampering for IE9 */
@media screen and (min-width:0\0) {
  .custom-select {
    /* IE9-specific styles */
  }
}

Use pseudo-elements and pseudo-classes like :hover and :active to enhance interactivity and usability:

select.custom-select:hover,
select.custom-select:active {
  /* Sexy hover and active styles */
}

Ensuring theme consistency

Styling a consistent theme across your site is easier with CSS variables:

:root {
  --dropdown-background: #fff;
  --dropdown-border: #000;
}



select.custom-select {
  background-color: var(--dropdown-background);
  border-color: var(--dropdown-border);
  /* ... other styles ... */
}

Styling native arrows

To replace the native arrow of a <select> dropdown, use a custom SVG or font icon. Ensure its correct position by managing background-position:

select.custom-select {
  /* ... other styles ... */
  background-image: url('custom-arrow.svg');
  background-position: right 10px center;
  background-size: 12px 12px; /* Keep this proportional to the icon size */
}

Alternatively, mask the browser's dropdown arrow by positioning the <select> element inside a div with overflow: hidden. Use pseudo-element with pointer-events: none; to overlay a mask:

.select-container {
  position: relative;
  overflow: hidden; /* Hide and seek with the native arrow */
}

.select-container:before {
  content: ''; /* A silent watcher */
  pointer-events: none; /* Don't allow it to meddle */
  position: absolute;
  right: 10px; /* A little right-sided, eh? */
}

.select-container select.custom-select {
  padding-right: 30px; /* Balance for the custom arrow */
}

Creating a cohesive design language

Styling properties like border-radius, color, and background help maintain a cohesive look:

select.custom-select {
  color: #444; /* A little pinch of grey */
  background: linear-gradient(to bottom, #ffffff, #f2f2f2); /* Simplicity is complex */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Let's play with the shadows */
}

Ensure font consistency and disable text selection to avoid unwanted user interactions:

select.custom-select {
  font-size: inherit; /* We love consistency, don't we? */
  -webkit-user-select: none; /* Selection is overrated */
  -moz-user-select: none; /* Think twice before selecting */
}