Customizing Select Dropdown Arrows with CSS: A Complete Guide

The select dropdown is a common UI element in web pages and applications.

By default, most browsers style select dropdowns with a small downwards pointing arrow on the right side to indicate that it is a dropdown menu.

Why Customize the Select Dropdown Arrow?

There are a few reasons you may want to customize the default select dropdown arrow:

  • Changing the arrow to an icon that fits your site’s visual style
  • Rotating the arrow to point upwards for dropdown menus that open upwards
  • Removing the arrow completely for a cleaner look
  • Changing the arrow’s color, size, or position
  • Supporting different states like hover and focus

Customizing the Select Dropdown Arrow with CSS

Website designers often want to customize the default arrow icon shown on select dropdown elements.

However, unlike other HTML elements, there is no specific CSS property that targets the select arrow itself.

At first glance, restyling a dropdown seems straightforward – simply target the <select> tag in your stylesheet and adjust the appearance.

Appearance Property

Unfortunately browser defaults get in the way, so extra CSS is required. Luckily, changing the default select arrow icon can be achieved with some clever workarounds.

The key is to first reset the <select> element styling to remove native browser defaults. This can be done using the appearance property along with vendor prefixes:

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

With defaults disabled, the select will now inherit styles from your CSS. You can utilize background images, borders, and pseudo-elements to draw custom arrows. Positioning properties help place the arrows precisely.

Applying the CSS techniques outlined above will produce a customized select dropdown like the following example:

Here you can see that there is no dropdown icon present by default. Now we are going to utilize some custom styling to add in our own arrow icon.

Pseudo Elements

You can also use the ::after pseudo element to add a custom arrow with just CSS:

HTML structure:

<select class="select1">
    <option value="car">Car</option>
    <option value="bike">Bike</option>
    <option value="train">Train</option>
    <option value="aeroplane">Aeroplane</option>
</select>

CSS:

.select1::after {
  content: "";
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

This creates a downwards pointing arrow that matches the text color. The arrow is very customizable with border sizes and colors.

Cross Browser Compatibility

It’s important to test that your custom select arrows display properly across different browsers. Vendor prefixes like -webkit and -moz are needed for full cross-browser support.

You may also need to tweak positioning and sizing so the arrow displays consistently. Flexbox and grid can help prevent alignment issues.

Animations and Transitions

CSS allows hovers, focuses, and other state changes to smoothly animate. For example, you could rotate the arrow on hover:

.select1:hover::after {
  transform: rotate(180deg);
  transition: .3s;
}

Small enhancements like animated arrows greatly improve usability.

How to use inline SVG content as a background image?

SVGs provide resolution-independent vector iconography perfect for use in website designs. Rather than linking externally hosted files, SVG code can be directly embedded into CSS background properties.

To inline SVG content:

  • Open the .svg source file in a text editor and copy the code from the <svg> tags through </svg>.
  • In your CSS, use the background property and insert the SVG code after url(data:image/svg+xml,
  • Remove any # symbols from hex color values (replace with %23).

For example:

.select1 {
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
    background-position: calc(100% - 12px) center !important;
    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    padding: 8px 32px 8px 16px;
}
/* To remove the arrow of select element in IE */
.select1::-ms-expand {
  display: none;
}

The code example demonstrates a few key techniques for custom select arrow implementation:

  1. The appearance: none; property resets default styling so background images and icons can be applied.
  2. The background-position uses calc() to precisely place the arrow icon. calc(100% - 12px) positions from the right edge.
  3. An SVG image is set as the background arrow icon for crisp, resolution-independent graphics.

Fine-tuning the arrow position is achieved by tweaking the background-position percentage values:

background-position: calc(100% - 20px) center;

Inlined SVG backgrounds reduce HTTP requests and allow icon manipulations without touching markup. Embedding the code also makes edits easier across environments.

However, base64 encoding SVG data can bloat stylesheet file sizes. External SVG sprite sheets help minimize duplicate data. Both approaches have appropriate use cases.

Conclusion

Changing the default select dropdown arrow only requires a few lines of CSS. Removing default styling, adding background images, and leveraging pseudo elements provide all the control you need.

With these techniques, you can customize arrows to match any design. Don’t settle for boring basic dropdowns!

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment