> Markdown version of [/magazine/722-5-examples-of-creative-customised-select-elements](https://www.wearedevelopers.com/magazine/722-5-examples-of-creative-customised-select-elements). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# 5 Examples of Creative Customised <select> Elements

**By:** [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney)

**Published:** April 1, 2026

Until now, `<select>` was one of the few HTML elements without customisation options. Of course, you could include horizontal dividers, group options and some other minor tweaks, but anything more than this meant ditching the native element altogether.

Most of the time, it meant re-building it (visually, at least) with messy divs, JavaScript, ARIA attributes and a whole load of bad practices.

Well, the select element now comes with full CSS control, opening up all kinds of possibilities when it comes to selects.

To use these features, you simply add a single declaration in your CSS:

    select,
    select::picker(select) {
      appearance: base-select;
    }

The key property here is `appearance: base-select`, as it strips the native OS styles and lets you add your own.

The `select` rule applies this to the trigger button, and `select::picker(select)` targets the dropdown panel itself, giving you a CSS handle on both parts of the element.

Of course, progressive enhancement means that non-supporting browsers simply render a standard select, so you can experiment without fear of users not being able to use what you make.

To help you see what you could do, we found some amazing CodePens showing some imaginative (and slightly crazy) customisable selects that we know you’re going to love.

![Folders, Fruit Shoot and Cats Tail selects](https://wearedevelopers.imgix.net//magazine/articles/722/images/content/SkL60anFhdPtMClWjT9k-1774960496.jpeg?w=984&auto=compress,format)

## The Folder Stack

Patrick Brosset’s ([@captainbrosset](https://codepen.io/captainbrosset)) wonderfully creative folder picker is built with pure CSS, with a fancy spring-back effect on open and folder icons that make for a familiar - but also different - UX than we’re used to from a `<select>`.  
[🔗 Open CodePen](https://codepen.io/captainbrosset/pen/dPXdgae)

## Select your Fruit!

Full points for creativity go to Temani Afif [@t\_afif](https://codepen.io/t_afif) for this fruit shooting range style select. This one _really_ pushes the imagination when it comes to the humble `<select>` element, and is a great example of how much you can now customise it.  
[🔗 Open CodePen](https://codepen.io/t_afif/pen/PwGPJOB)

## The Cat’s Tail

[Marcel’s](https://codepen.io/scjaabkw-the-looper) cute cat select is a fun and experimental take on the select, with it’s tail growing as you move your cursor to hover on items further down the list.  
[🔗 Open CodePen](https://codepen.io/scjaabkw-the-looper/pen/JoXKvwP)

## The Cat’s Tail

[Marcel’s](https://codepen.io/scjaabkw-the-looper) cute cat select is a fun and experimental take on the select, with it’s tail growing as you move your cursor to hover on items further down the list.  
[🔗 Open CodePen](https://codepen.io/scjaabkw-the-looper/pen/JoXKvwP)

![The Flag Picker and the F1 Driver Select](https://wearedevelopers.imgix.net//magazine/articles/722/images/content/FGFsgmcJvgNcp5jnLNu9-1774960496.jpeg?w=984&auto=compress,format)

## F1 Driver Select

Chris Bolson [(@cbolson)](https://codepen.io/cbolson)'s polished and slick F1 driver select brings the element to life and shows how much more visual the element could be for users.  
[🔗 Open CodePen](https://codepen.io/editor/cbolson/pen/019cbfe5-85da-7d31-a7de-44b6b35e7c1c)

## The Flag Picker

Elena Kozlova [(@millisabel)](https://codepen.io/millisabel)'s flag picker again offers for for a more visual experience for what could be a very mundane part of the user journey through a form, for example. It is a little laggy, but it’s a nice idea and executed well.  
[🔗 Open CodePen](https://codepen.io/millisabel/pen/JoXbwBm)

## Share Your Selects

It’s exciting to see developers reimagining what a dropdown can look like, and for us to be able to use a native solution for more creative UI ideas. However, we would always remind developers to be careful in balancing this with performance and accessibility.

Have you made something interesting with the `<select>` element? [Send us a link on Bluesky](https://bsky.app/profile/did:plc:bse64d33fzf5in4ejj4cit7w) and we’d love to share it with our community.

**Note:** [Read more on how to customise the `<select>` element on the MDN docs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select)



## Related Articles

- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [Stop Using Divs: Five Input Types You Could Use Right Away](https://www.wearedevelopers.com/magazine/664-stop-using-divs-five-input-types-you-could-use-right-away)
- [Tips and Tricks: CSS Pseudo Elements and Pseudo Selectors](https://www.wearedevelopers.com/magazine/510-tips-and-tricks-css-pseudo-elements-and-pseudo-selectors)
- [Building a "shoutout" component in plain HTML/CSS/JavaScript](https://www.wearedevelopers.com/magazine/556-building-a-shoutout-component-in-plain-html-css-javascript)

## Related Videos

- [Tips and Tricks: CSS Pseudo Class Selectors and Pseudo Elements](https://www.wearedevelopers.com/videos/1247-tips-and-tricks-css-pseudo-class-selectors-and-pseudo-elements)
- [What’s New and What’s Next in Web UI](https://www.wearedevelopers.com/videos/956-what-s-new-and-what-s-next-in-web-ui)
- [WeAreDevelopers LIVE - CSS is DOOMed](https://www.wearedevelopers.com/videos/1838-wearedevelopers-live-css-is-doomed)
- [Extending HTML with Web Components](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components)

## Related Jobs

- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**