更改jQuery Dropdown的样式

Question

我正在使用HTML5，CSS3，jQuery（jquery.mobile-1.4.5.css）开发移动应用程序。在应用程序的一个部分中，我有一个用户选择特定值的下拉菜单。

<div style="margin-top:08%">
    <select id="dispMOD" onchange="getID(selectedIndex)" style="display: block;margin-left: 10%;margin-right: 10%;">
        <option>Select Recipient</option>
    </select>
    <textarea id="remarksBox" placeholder="Enter Remarks here..." rows="6" style="border: 1px solid; margin-top:04%; text-align:left;width:75%;display: block;margin-left: auto;margin-right: auto;"></textarea>
    <button class="button icon-right ion-paper-airplane button-small button-dark" onclick="submit()" id="submit"style="margin: 0 auto;width:40%;">Send</button></div>

现在我想从jQuery.css文件中更改下拉列表（选择标记）的样式（高度，宽度，文本），但我无法找到要更改的相应元素。有人可以帮帮我吗？

感谢。

Answer 1

使用jQuery mobile时，显示选择/选项的默认选项取决于您正在查看页面的平台。上面的代码将在桌面上显示常规选项，在iOS中选择Apple风格和Android设备中的Android风格

要更改此设置，您必须首先使用jQuery mobile提供的自定义选择。他们会将select和options转换为div和其他HTML元素

然后您可以轻松覆盖这些元素的样式。

要使用自定义显示，请设置选择标记

的数据属性data-native-menu="false"

DEMO：http://jsfiddle.net/06h8u5La/

<select id="dispMOD" onchange="getID(selectedIndex)" style="display: block;margin-left: 10%;margin-right: 10%;" data-native-menu="false">
    <option>Select Recipient</option>
</select>

修改

  

然而，我检查了小提琴，我无法编辑样式   下拉列表。对于前者在上面的样品中，是拉伸   在整个页面;我无法确定宽度应该是多少   的。您可以看到，添加保证金并没有帮助。 - user3932624   3分钟前

选择类为ui-select，并且选项位于隐藏div中，当选择点击该类时，该选项会显示div为ui-selectmenu

使用浏览器检查工具找出元素是什么。