Custom Select Arrow using CSS

The <select> is a basic form element that allows users to choose one option from a list. But the default look, especially the arrow, doesn’t fit modern UIs. In this article you will learn how to disable the default arrow in a <select> using CSS and how to add your own custom select arrow using SVG and the data:image property. This will make your forms look more modern and consistent.

Disabling the Default Arrow

First step to add a custom arrow is to disable the default one which is styled by the operating system or browser. You can do this using the CSS property appearance: none. This property works across all modern browsers and removes the standard system styling.

select {
    appearance: none; /* Disable the default arrow */
    -webkit-appearance: none; /* For WebKit-based browsers */
    -moz-appearance: none; /* For Firefox */
}

Add a Select Arrow Using SVG

After disabling the default arrow you can add a custom one by using an SVG in data:image format. This way you can easily match the arrow color with the overall form style using currentColor and the arrow will change its color based on the text color.

select {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}

Complete Styling for a Custom Select Element

Here is the full CSS code to create a custom <select> with a custom arrow:

/* ---------------------------------- */
/*    Snippflow Custom Select Arrow   */
/* ---------------------------------- */

.sf-select {
    appearance: none; /* Disable the default arrow */
    -webkit-appearance: none; /* For WebKit-based browsers */
    -moz-appearance: none; /* For Firefox */
    width: 100%;
    padding: 10px 35px 10px 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    cursor: pointer;
}

See the Pen Custom Select Arrow using CSS by Snippflow (@snippflow) on CodePen.

Icons: https://www.untitledui.com/free-icons