1

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

到目前为止，我发现的唯一解决方案是使用 jQuery 和另一个SO 答案select来回更改标签的类型，但由于这与样式有关，我想了解纯 CSS解决方案（或至少，CSS + jQuery 解决方案）。span

4

4 回答 4

2

演示小提琴

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>只有一个的元素<option>

演示小提琴

jQuery

$('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>"));
    }
});

这将遍历<select>页面上的每一个，然后检查它是否有一个选项。如果是这样，它将隐藏选择并在之后插入一个跨度。

于 2013-10-18T13:42:12.483 回答
1

没有 CSS 功能来确定一个选择有多少选项；如果这是您使用的唯一检查，“它有多个选项吗？”，那么您将需要一些 JavaScript。

一般来说，<select>用 CSS 正确地设置 a 的样式确实很困难，尤其是在跨浏览器的情况下。请参阅如何从 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/

于 2013-10-18T13:23:37.873 回答
0

如果您放弃纯 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 演示

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

于 2013-10-18T14:00:20.150 回答
0

据我所知，SELECT 的 CSS 样式没有跨浏览器解决方案。这就是为什么有这么多解决方案在页面上将 SPAN 转换为类似 SELECT 的对象。

于 2013-10-18T13:18:48.310 回答