Styling a <select> element using CSS

When you want to apply markup to select elements. You might notice that sometimes it isn’t particularly easy to get the results that you want. Selects inputs (especially on Apple devices) don’t seem to work well with CSS and this can make some simple tasks rather difficult.

There are various solutions to this problem and they all seem to use one of these methods:

Replacing the selects style with a background image.
Replacing the entire select (e.g. select2).

For a recent project I had to add some styling to a select and I found a solution that doesn’t require a custom (external) background image. The solution is pretty much copy/paste and should work on all major browsers. It'a perfect starting point for styling selects.

styled select

A codepen is available here. The CSS is pasted below:

/* Styled <select> element example
   by Sven van de Scheur - https://svenv.nl/markup/stylingselect */

select {
  /* Adjust render settings */
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;

  /* Regular stylling */
  width: 150px;
  height: 25px;
  padding: 0 5px;

  /* Fake a button by abusing a background image */
  background-color: white;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: right;

  /* Set a correct border */
  border: 1px solid #E2E2E3;
  border-radius: 0;
}

If you have any questions or additions please let me know.

Happy new year!

Back to basic with HTML and CSS