How to Customize the Select Icon in Bootstrap

Change anything from icon to color.

4 min readNov 15, 2022

Bootstrap gives us a nice, clean select element — unlike the rather ugly default styling the browser applies. Sometime, it would still be nice to customize the select arrow and create a unique look.

Let’s see how fast and easy this can be done.

We use Bootstrap 5 here, an important distinction, since there are changes in the form elements compared to Bootstrap 4.

Custom color

The icon is actually a background image set on the select element. As we all know, we cannot apply color to a background image. Since the background image is an svg icon, we need to adjust the stroke property of the svg.

If we inspect the element, we see that a data-url is used.

background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

Just as a side note, a path to an external svg file could have been used here as well. Everything past the first comma is just the url encoded content of an svg file.

Notice that the string is url encoded.

stroke='%23343a40'

If we throw this in a url encoder / decoder we get the default color.

stroke='#343a40'

Now, lets change that to a nice shade of blue: #2596be. You can just copy the default styling rule and overwrite the stroke value. Make sure to replace the hash sign with %23 for proper encoding.

I am also going to add the color property to match the text to the icon.

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232596be' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    color: #2596be;
}

The result:

Custom size

This one is pretty simple. But for completeness' sake, I am including it as well. We already established that we are dealing with a background image here. That is why we can simply adjust the background-size property.

Default:

.form-select {
    background-size: 16px 12px;
}

We set the width to 20px and the height will adjust automatically according to the proportion of the icon.

.form-select {
    background-size: 20px auto;
}

The result (including the prior code for color and background-image).

Custom icon

It is even possible to change the icon altogether. One could argue that these icons should stay at least vaguely the same across websites to not confuse users. So when customizing, it is best to stick to icons that indicate toggling a dropdown. Such as any variation of a downward facing arrow. I choose a fairly ugly one, just because it was a free one from fontawesome. Just copy the svg code at fontawesome, throw it into a url-encoder, and then paste it, either as a data-url or into a svg file. You can then adjust the color, just like we did earlier. I also adjusted the background size.

.custom-select-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%20fill%3D%22%232596be%22%3E%3C%21--%21%20Font%20Awesome%20Pro%206.2.0%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%20%28Commercial%20License%29%20Copyright%202022%20Fonticons%2C%20Inc.%20--%3E%3Cpath%20d%3D%22M182.6%209.4c-12.5-12.5-32.8-12.5-45.3%200l-96%2096c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L128%20109.3V402.7L86.6%20361.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l96%2096c12.5%2012.5%2032.8%2012.5%2045.3%200l96-96c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192%20402.7V109.3l41.4%2041.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3l-96-96z%22%2F%3E%3C%2Fsvg%3E");
    background-size: 10px auto;
}

The result:

As I said, not the prettiest icon for this purpose, but it serves as an example.

Conclusion

It is very easy to customize the standard Bootstrap select icon. You can adjust the size, color, and icon itself. Don´t go crazy with replacing the select icon though, as it should remain a consistent indicator for the toggling action across websites. When using data-urls, remember to url-encode them.

Boost your frontend skills by creating an interactive resume builder with my beginner-friendly, hands-on Vue.js course.

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.