DEV Community

Cover image for Custom Select Arrow using CSS
SnippFlow
SnippFlow

Posted on

Custom Select Arrow using CSS

The 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 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.

See the following Codepen for a demo:

Full article: https://snippflow.com/snippet/custom-select-arrow-using-css/
CSS Snippets

Top comments (0)