← All elements
<select class="sel" aria-label="Pick a fruit"><option>Mango</option><option>Papaya</option><option>Banana</option></select>About this layout
A native select restyled with appearance: none and an inline SVG arrow, keeping all built-in keyboard behaviour.
How it works
The select keeps its native behaviour, including the dropdown list and keyboard use, but appearance: none removes the system arrow and padding. A small SVG chevron is added as a background image using a data URI, positioned on the right, and the border and shadow change on hover and focus.
Ways to customise it
- Change the stroke colour inside the data URI to recolour the arrow.
- Adjust the right padding if you use a bigger arrow.
- Edit the focus box-shadow to match your brand.
Good to know
The open option list is still drawn by the browser, which is good for accessibility and mobile. Only the closed state is styled. Keep a visible label for the field in your form.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.