Question

是否可以隐藏jQuery Mobile中用于选择菜单的默认图标？默认情况下，它们使用向下箭头图标。我知道可以通过data-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>

Answer 1

您可以像这样使用data-iconpos =“noicon”：

<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>

除了top，right，bottom或left之外的data-iconpos属性的任何值都不会显示图标。

以下是此示例的jsfiddle的链接：http://jsfiddle.net/KWQJf/

Answer 2

出于某种原因，在SELECT框中，即使我设置了data-iconpos ='noicon'，div仍然保留...所以我所做的是一个小小的hackish，但并不坏。我调用了这个Jquery函数onload（IN ADDITION to data-iconpos ='noicon'）

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

希望这可以帮助那些遇到同样问题的人。：）

Answer 3

您可以在自己的样式表中覆盖该样式：

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

隐藏jQuery Mobile中的“选择菜单”图标

3 个答案: