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>

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/

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. :)

You can override that style in your own stylesheet:

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