Custom styled dropdowns


I was looking for ways to make the dropdown selectors in Axure look better whilst still being functional and couldn’t find a satisfactory answer so I thought I’d share this little trick to make working custom styled dropdown select menus.

You need 3 elements a droplist set to be invisible, a blank placeholder which will receive the selected text and a pretty box with the custom arrow, borders and colours of your choice.

Custom dropdown.rp (45.5 KB)

As of RP9, you can style the borders, fill colours, text colour etc of droplists (and various other HTML widgets) directly. You can’t control how the droplist appears when opened or the arrow icons, as this is handled by the browser, but everything else can be handled without the additional elements.

I’m making and updating my own library which I use in my projects. You can take a look at it here:

I’ve done some work with dynamic panels that eases my prototyping. If someone think that it will be helpful, feel free to download the .rplib file.

My widgets.rplib (791.9 KB)

1 Like

It’s the arrow that’s been my issue.

1 Like