CODEWITHSUNDEEP
jquery-mobile
Ryan Tofteland
Ryan Tofteland

Reputation: 913

Hide Select Menu icon in jQuery Mobile

Is it possible to hide the default icon used for select menus within jQuery Mobile? By default they use the down arrow icon. I know it's possible to specify an icon via the data-icon attribute, but I haven't found a way to hide it.

Example that's using the default icon:

<div data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

Upvotes: 1

Views: 7104

Answers (3)

rckehoe
rckehoe

Reputation: 1198

For one reason or another on SELECT boxes, the div still remained even though I set data-iconpos='noicon'... SO what I did was a littly hackish, but not bad. I called this Jquery function onload (IN ADDITION to data-iconpos='noicon')

 $('.ui-icon.ui-icon-arrow-d.ui-icon-shadow').remove();

Hope this helps anyone who experienced the same problem I did. :)

Upvotes: 1

Jasper
Jasper

Reputation: 76003

You can use data-iconpos="noicon" like so:

<div data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1" data-iconpos="noicon">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

Any value for the data-iconpos attribute other than: top, right, bottom, or left will not display an icon.

Here is a link to a jsfiddle of this example: http://jsfiddle.net/KWQJf/

Upvotes: 9

scurker
scurker

Reputation: 4753

You can override that style in your own stylesheet:

.ui-select .ui-icon-arrow-d {
  display: none;
}

Upvotes: 0

Related Questions