Question

I am using a select element with data-native-menu="false".I want to customize things like the width of the dialog that appears,color,text allignment etc.After inspecting the elements I figured out I can target the menu contents with something like this:

#custom-menu>li{
text-align: right !important;
color: #FF0000 !important;
}

But it is not working.Can anyone help me with this?.Thanks in advance.

You can see a sample here – http://jsfiddle.net/8nVTC/

Answer 1

Inspect deeper, the above properties get overridden on the list item’s child anchor element, hence you have to use its class to set these:

.ui-link-inherit {
    color: #FF0000 !important;
    text-align: right;
}

http://jsfiddle.net/8nVTC/5/