Adding image next to jQuery Mobile Select Menu

Question

Is it possible to add an icon of some kind next to a jQuery Mobile select menu in the image below? If so, what would be the image size required? Thanks in advance!

Answer 1

You can add icons to just about anything by adding the following parameters to the element you want to icon to appear within:

 data-icon="arrow-l" data-iconpos="left" 

Where arrow-l specifies an arrow pointing left.

If you want to specify your own icon/image rather than use one provided by jQuery Mobile, then you can add an image inside the li (before your text), with a class of either ui-li-icon or ui-li-thumb :

<li>
    <img src="images/gf.png" alt="France" class="ui-li-icon">
    <a href="#">Social Triangle</a>
</li>

ui-li-icon, appears to be restricted to 16px X 16px, and uses the following css conditions:

ui-li-icon {
max-height: 16px;
max-width: 16px;
}

ui-li-thumb, appears to be restricted to 80px X 80px, and uses the following css conditions:

.ui-li-thumb {
max-height: 80px;
max-width: 80px;
}

If you take a look at the above links to the jQuery Mobile documentation, it shows you how to use them in more detail, just check the source: