如何根据其选项的数量设置HTML select元素的样式？

Question

我想要做的是根据选项的数量改变选择框的样式。更具体地说，当只有一个选项时，我希望它看起来像span，否则就像一个典型的select元素。换句话说，我想隐藏在没有选择时做出选择的可能性。

到目前为止，我发现的唯一解决方案是使用jQuery和另一个SO answer将标记的类型从select来回更改为span，但是因为这是关于样式的，所以我想知道一个纯CSS解决方案（或者至少是CSS + jQuery解决方案）。

Answer 1

的 DEMO FIDDLE 的

CSS

select { 
    border: none;
    -webkit-appearance: none;
    font: inherit; 
}

select::-ms-expand {
    display: none;
}

select:focus {
    outline:none; 
    outline-offset:0; 
}

select > option {
    display:none; 
}

这些选择样式只应应用于只有一个<select>的{​​{1}}元素

的 DEMO FIDDLE 的

的jQuery

<option>

这会遍历您网页上的每个$('select').each(function(i, el) { if ($(el).children().length == 1) { $(el).css("display", "none"); // Hide it var optionVal = $(el).children().eq(0).text(); $(el).after($("<span>" + optionVal + "</span>")); } }); ，然后检查它是否有一个选项。如果是，它将隐藏选择并在之后插入一个跨度。

Answer 2

没有CSS功能可以确定select有多少选项;如果这是您使用的唯一支票，“它有多个选项吗？”，那么您将需要一些JavaScript。

一般来说，使用CSS正确设置<select>的样式真的很难，尤其是以跨浏览器的方式。请参阅How to remove the arrow from a tag in Firefox以了解其他用户为完成类似操作所做的努力。他的解决方案可能适合您，但它涉及修改HTML，如果您打算这样做，您也可以将其更改为<span>。

编辑：

没意识到您也在寻找JavaScript解决方案。这是最简单的方法，应该像jQuery一样跨浏览器：

$("select").each(function(i, elem){
    if ($(this).children().length == 1) {
        this.outerHTML = "<span>"+this.innerHTML+"</span>";
    }
});

http://jsfiddle.net/SfVp9/3/

Answer 3

据我所知，没有针对SELECT CSS样式的crossbrowser解决方案。这就是为什么这么多解决方案可以将SPAN转换为页面上类似SELECT的对象。

Answer 4

如果您放弃纯CSS解决方案并决定使用CSS / JS组合解决方案。这是：

$("select").each( function(i) {
    if( this.length ==1) {
        var val = $(this).first().val();
        $(this).before("<span>" + val + "</span>");
        $(this).addClass("hidden");
    }
} );

JSFiddle Demo

此时，您可以通过向其添加类来为任何方式设置样式。