如何设置<选择>样式元素？

Question

如何完全改变 元素的设计？例如，这就是我希望下拉菜单的外观：

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

Answer 1

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

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

这样的插件之一就是这个 来自 Filament Group 的出色 jQuery UI 选择菜单，

但是，正如评论中 clonked 所指出的 - 至少使用一些浏览器嗅探来检查人们是否没有从 iPhone 或类似设备访问该菜单，因为

如果您有机会在服务器端使用 PHP，他们可能会在访问 JS 选择框时遇到问题，这里有一个不错的浏览器嗅探库：http://chrisschuld.com/projects/browser-php-detecting -a-users-browser-from-php/

Answer 2

仅使用 CSS 来实现 元素的一致样式会遇到问题。最好的选择是使用 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 »</a>
<a href="JavaScript:void(0);" id="btn-remove">« 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模拟的！