Axure 10 Dropdown Styling Query

newbie-question
#1

I am really new to Axure and having some difficulty understanding how to style a particular action in a dropdown list.

I’m happy and understand the majority of styling options on the dropdown but cannot see where i can change the background colour of the items in the list of available items as the mouse passes over them.

The same dark grey colour when you mouse over the items in the list, appears if you navigate through the items with the arrow keys on the keyboard.
I want to change this dark grey to another colour but cannot find out where this styling option is.

Thanks in advance.

Alan Edwards

image

#2

Styling the <option> of an HTML <select> element isn’t possible, even outside of Axure. The appearance is OS and browser-dependent. To achieve what you’re trying to do, you’ll need to implement your own dropdown using style-able elements (repeaters are a good fit for this problem). Beware, though; the standard HTML dropdown does a lot of stuff under the hood, mainly for accessibility and mobile friendliness, and your own implementation won’t have all that stuff built-in unless you build it in.

#3

Thank you for your resonse.

Alan

#4

No problem. Here’s a very lightweight example of using a repeater as a custom dropdown:

custom-droplist.rp (51.4 KB)

#5

Thanks again, this is exactly what I was looking for.

Regards

Alan

closed #6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.