jQuery 选择 - 如何更改 CSS 样式选择？答案

【问题标题】：jQuery select- How to change the css style select?jQuery 选择 - 如何更改 CSS 样式选择？
【发布时间】：2014-12-07 10:55:15
【问题描述】：

我使用<select> 来创建选择过滤器。我的问题是 jQuery 的 css 接管了<select> 的 css 的常规样式。如何使选择显示为 HTML 中的常规 <select>？

<div id="mutualFriends">

    <select class="sortBy" name="sortBy" data-url="/threebaysover/profile/sortFollowers">
        <option value="">Sort By</option>
        <option value="new" selected="selected">Newest</option>
        <option value="old">Oldest</option>
        <option value="firstName_asc">First Name a-z</option>
        <option value="firstName_desc">First Name z-a</option>
        <option value="lastName_asc">Last Name a-z</option>
        <option value="lastName_desc">Last Name z-a</option>
        <option value="message">Recent message</option>
        <option value="company_asc">Company Name a-z</option>
        <option value="company_desc">Company Name z-a</option>
    </select>

    <div id="mutual">

【问题讨论】：

查看ivaynberg.github.io/select2 它将设置选择框和其他有用选项的样式。还有 jQuery.SimpleSelect (pioul.fr/jquery-simpleselect)。
jQuery 的 CSS 是什么？你在使用 jQuery UI 吗？你有显示问题的 jsFiddle 或 Codepen 吗？
@ckuijjer - 我正在使用 jQuery Mobile

标签： jquery html css select

【解决方案1】：

当您不希望 jQuery UI 重新设置元素的样式时，将 data-role="none" 添加到 <select> 元素。见How to "turn off" jQuery Mobile's styling of <select> drop downs?

【讨论】：

你知道如何将箭头图标更改为我需要的特定图标吗？
浏览器不允许<select> 框的样式太多。唯一的选择是将图像放置在<select> 框的顶部。如果您想设置 <select> 框的样式，我建议您查看一个 JavaScript 库，该库将 <select> 元素替换为一些 <div> 结构，例如 @Marta Fernandez 指出的 ivaynberg.github.io/select2。跨度>