Problem with creating a custom style widget in the widget style manager

[LesleyB]

I’m trying to create a custom style droplist so that the left padding is around 30px. When I’m trying to do this in the widget style manager by creating a new one and adding custom styling, the padding and alignment aren’t working (there may be more not working but these are the only two I’ve checked).

Is this because you can’t change those elements of a droplist?!

[Alyssa_Axure]

Hi! You’re correct; the droplist widget’s padding (and several other properties) can’t be changed; this is because these widgets are form widgets, which have their appearance and behavior controlled by the browser in which they are viewed. If you’re specifically looking to build a custom styled droplist and want full control over how it looks, then building a custom droplist should do the trick for you. The tutorial below should help if you’re interested in taking a look at how that could be implemented:

https://www.axure.com/support/training/custom-droplist-tutorial

Hopefully that helps!

[LesleyB]

Thanks for replying Alyssa. Great, I’ll give the custom droplist a go

[tishaleggett]

Use CSS to override the form droplist - you will need to host a custom arrow image somewhere. Add this to axshare as a plugin on your file. You can create a custom dropdown in that fashion, including the padding. I do it with every prototype. *I also use the same method to create custom scrollbars.

Here is an example of css I use:

select {
padding-left:2px;
font-family: Roboto, “Roboto”, “Segoe UI”, Helvetica, Arial, sans-serif;
font-size: 14pt;
color: #333333;
border: 1px solid #CCCCCC;
background:url(https://image.ibb.co/mbgePf/interface-input-caret-down.png) no-repeat;
background-color: #FFFFFF;
background-position: right;
-webkit-appearance: none;
}

[LesleyB]

Thank you for replyng