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

Question

如何完全更改<select>元素的设计？例如，这就是我希望下拉列表显示的方式：

Screeshot http://i56.tinypic.com/2n7h7uv.png

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

Answer 1

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

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

其中一个插件就是 great jQuery UI selectmenu from Filament Group

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

时遇到问题

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

Answer 2

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

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

Answer 3

有几个jQuery插件可以帮助您实现这一目标。

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

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

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

Answer 5

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

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

Answer 6

这是不可能的！

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