如何设置 <select> 元素的样式？答案

【问题标题】：How to style <select> elements?如何设置 <select> 元素的样式？
【发布时间】：2021-05-19 03:20:59
【问题描述】：

如何彻底改变<select> 元素的设计？例如，这就是我希望下拉列表的外观：

有没有办法用 CSS 做到这一点？如果没有，jQuery？

【问题讨论】：

答案取决于操作系统/浏览器/版本；你的目标是什么？
你有理由不想使用 jquery 吗？如果你使用jquery，它可以很容易地完成..
我强烈建议您不要“使用 jQuery”来替换选择。对于 jQuery 所做的所有美妙的事情，jQuery UI 通常是一个可用性问题。使用真正的<select> 元素，随意设置样式，并接受某些浏览器已做出（正确的）选择，使用标准的操作系统级别的小部件，有时样式更改有限。例如，使用 iPhone 的用户会非常感谢您没有使用基于 JavaScript 的 DHTML“解决方案”，只是为了让事情看起来更漂亮。

标签： jquery css xhtml select drop-down-menu

【解决方案1】：

CSS 只会在某些浏览器中为您提供帮助 - 例如，Internet Explorer 会在 SELECT 中完全忽略它

但是，您仍然可以在没有任何 CSS 的情况下在页面上使用普通选择，然后使用 优雅降级 的 jQuery 插件（所以当人们没有启用 JS 时，他们仍然会看到那个原始的选择框）

这样的插件之一就是这个great jQuery UI selectmenu from Filament Group

然而，正如 cmets 中的 clonked 所指出的 - 至少使用 一些浏览器嗅探 来检查人们是否没有从 iPhone 或类似设备访问该菜单，因为他们访问该 JS 选择框可能有问题

如果您有机会在服务器端使用 PHP，这里有一个不错的浏览器嗅探库：http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

【讨论】：

【解决方案2】：

仅使用 CSS 来实现 <select> 元素的一致样式会遇到问题。你最好的选择是使用 jquery。幸运的是，已经创建了一个非常好的插件：

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

【讨论】：

正如该页面上的 cmets 中所述：“嗯.. 表单元素的功能不应该取决于浏览器吗？例如，这会杀死 iPhone 上出现的选择（以及很快的 iPad）最适合该平台。” 我不能对你投反对票，因为你已经回答了 OP 的愿望......但我必须指出，OP 要求的是有害。
我同意你的观点，这种类型的功能也不是我特别喜欢实现的。但有时项目要求胜过正确的做事方式 :) 理想情况下，使用即将推出的 jquerymobile.com 将有助于减轻移动设备的一些担忧。我还认为，在浏览器供应商允许所有 html 元素按照 CSS 人员的需要设置样式之前，我们一直在寻找替代方法，例如 selectmenu() 插件。

【解决方案3】：

有几个 jQuery 插件可以帮助您完成这项工作。

这是一个轻量级的：http://www.adamcoulombe.info/lab/jquery/select-box/

这里有一个使用图像从头开始构建的教程： http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

【讨论】：

【解决方案4】：

您可以尝试以下方法。其中 selectBg.png 是 1px 背景图像。它将给出如下图所示的输出：

CSS 代码：

select.onlyOne {
    background: url("./theme/default/images/selectBg.png") repeat scroll 0 0 transparent;
    border: 0 none;
    color: #747862;
    font-size: 12px;
    font-weight: bold;
    height: 40px;
    margin-bottom: 0;
    padding: 8px 4px 8px 0;
    width: 430px;
}

HTML 代码：

<select class="onlyOne" name="somename">
   <option value="somevalue">somevalue</option>
   <option value="somevalue">somevalue</option>
</select>

【讨论】：

【解决方案5】：

我们可以使用jquery编码设计选择标签，检查下面的编码

(document).ready(function() {
$('#btn-add').click(function(){
    $('#select-from option:selected').each( function() {
            $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-remove').click(function(){
    $('#select-to option:selected').each( function() {
        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-up').bind('click', function() {
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) - 1;
        if (newPos > -1) {
            $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});
$('#btn-down').bind('click', function() {
    var countOptions = $('#select-to option').size();
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) + 1;
        if (newPos < countOptions) {
            $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});

}); 并且html代码是

</select>
<a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
<a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>
<select name="selectto" id="select-to" multiple size="5">
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
  <option value="7">Item 7</option>
</select>

【讨论】：

【解决方案6】：

这不可能！

样式由其他html标签和css模拟！

【讨论】：