Can you style a drop down select list in any way?

Axure RP 8
1

We’re using a custom mobile UI library that has custom styled drop down select lists.

When I have to custom style a text field, I typically turn off the border and background color, and then create a visual look I want with a rectangle behind the actual text field.

I don’t see any option in Axure 7 that allows me to turn off any of the default drop down style.

The best I’ve come up with is to create the drop down list, then add 4 thin white rectangles to mask the top, bottom, left and right border of the drop list. Alas, this still doesn’t achieve a fully ‘unstyled’ drop list as when you show it in mobile safari, it still has default mobile safari styles applied such as the gradient background.

I can’t create a custom control that fakes a drop list, as I need to preserve it being a truly native select control in the browser so that the proper native iOS and Android picker/spinners appear to make the selection.

Is there any way around this?

2

I don’t think there is a way to tweak it directly via Axure. You have to create your own. Would you mind posting the screenshot of the custom dropdown, so that it would be even easier to say how it can be achieved

3

Well, I’ll answer my own question.

Can you do this in Axure? I don’t think so. At least, I can’t figure it out.

Can you do it in Axshare? Yes! With a custom plugin you can add this to the HEAD of your pages:

<style type="text/css">
    select {
        -webkit-appearance: none;
        appearance: none;
        border: 0px;
    }
</style>

So…this works. At least in mobile safari. It’d still be great if this was accessible inside of Axure, though. Getting everyone to build custom CSS isn’t always practical for us.

1 Like
4

Thanks for the clarification, I also have not found a way to do it via Axure directly.

5

Darrel. I am also looking for a solution to this problem. We have a custom themed drop down control, but still need the native drop list to appear. Have you come up with a solution that works for this?

6

I have found basically 2 ways for this:

  1. Make the standard dropdown control transparent (apart from the text) and put it above the custom styled dropdown. It works with the code that darrel posted. However, it can be incuded directly in Axure so that it works even when previewing. You can use Webfonts to hack it:
    Add a new web font, use @font-face and then in the text field insert:
} 
select 
{  
-webkit-appearance: none; 
appearance: none; 
border: 0px;

Now that CSS is built into your prototype.

  1. Put the custom styled dropdown on top of the standard one, then onClick of the custom dropdown, set focus to the standard dropdown. This should trigger the native dropdown control so the user can select something.

I prefer the first variant though, because it also works in desktop browsers. In addition, you don’t need to worry about manually showing the selected item on your custom control (since the text is still visible).

5 Likes
7

Worked perfectly for me after adding ‘background: #fff;’

tnx!

8

That’s perfect! Thanks, jaern!

9

Not sure if this helps but I was looking for a similar answer. Here’s what I came up with that ended up being a really super simple (no code) solution. You can do the following:

  • Set the background color of the dropdown to 0% transparency

  • cover up the line with a line object - update the thickness & match the background color to whatever is behind it

Customize dropdown styledropdown-style-shree.rp (50.5 KB)

10

I had an idea and it works for me to change the border color. It was more a trick.

I take 2 horizontal lines and 2 vertical line and merge them together to a frame in the same size of the dropdown list and changed the border color. Than i put it over the dropdown list. So I could use the dropdown list, but it had changed border colors.

I hope it helps (greetings from Germany) :slight_smile:

11

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