How to completely customize the look of the dropdown list widget

rp-7
newbie-question
#1

Hi there,

how can I customize the look a widget like the dropdown list?

All I can change about it is the Font and the fill, nothing more. But the widget still looks the same: this old look with this grey arrow.

I would like to completely customize its look, for example give it a different shape, border coulour, customized arrow etc. How can I do that?

Here you see an example of how I’d like my dropdown list to look like:


Thanks a lot for your help!

#2

Hi Ruderkahn,
Please check the attached RP file. This dropdown menu from my widget library.
I hope it will be useful for you.
Thanks,
Vikram
drop_down.rp (92.7 KB)

#3

You’ll have to build your own dropdown, likely with dynamic panels and other widgets. The default dropdown widget gets places as a normal <select> element with whatever default styling the browser/OS provides.

#4

Hi Vikramadhithan,

thanks a lot for the file. So these 3 dropdowns are dynamic panels, right? Can they then be saved as widgets in the custom library?

And basically, if one doesn’t like the design of the default widgets, one needs to build new ones with dynamic panels?

#5

Hi Ruderkahn,
Yes you can load the library in to your widget panel.
Please download the dropdon library and load into your widget panel.

I hope it will be useful for you.
Thanks,
Vikram
drop_down.rplib (98.5 KB)

#6

Hi Ruderkahn,

I’ve got a few more dropdowns in my library available. Feel free to check it out here:
Axure FLAT UI and Widget Library for rapid prototyping

You can get the widgets on this site:
Axure FLAT UI Widget Libraries: The most comprehensive widget libraries for Axure. Prototype like a star.

closed #7
unlisted #8