1

I am trying to add content to the selected option in a drop down list using css, when the drop down is closed. Specifically I want the drop down to say

Sort by: Option1

when closed and when you open the drop down you then see Option 1, Option 2 etc

I found this:

CSS :selected pseudo class similar to :checked, but for <select> elements

which shows how to apply a style to the right thing, but when I try and apply :before to the option element, nothing appears, in any circumstances. That is, I cannot seem to use the 

option:before{
 content:"before option"
}

as a rule to any effect.

Is this always the case for option elements? I also found that I could not wrap option text in span classes, so I can't do it that way.

4

2 回答 2

2

您应该使用 a<label>来指示其<select>用途。您不能在元素上使用伪元素，<option>因为只有<option>元素在<select>. 您不想这样做的另一个原因是，屏幕阅读器通常会跳过伪元素，从而使部分或人群和某些辅助技术无法访问标签。

这是将诸如“排序依据”之类的标签与下拉列表相关联的正确方法：

演示

<label>
    Sort by:
    <select>
        <option>one</option>
        <option>two</option>
    </select>
</label>

或者

<label for="my-select">Sort by: </label>
<select id="my-select">
    <option>one</option>
    <option>two</option>
</select>

如果您在下拉列表中需要“排序方式：” ，则应在 HTML 中添加该标签或将其注入 JavaScript，因为 CSS 无法做到这一点。我建议争辩说这不是与您的设计师一起使用的正确方法，但是因为您将有一堆多余的文本，并且下拉菜单看起来很丑陋。

这是使用 jQuery 在下拉列表中注入标签的方式：

演示

$('option').each(function () {
    $(this).text("Sort by: " + $(this).text());
});
于 2013-10-16T18:20:32.840 回答
1

在 CSS 2.1 规范中，:before伪元素的定义有些模糊，上面写着：“<strong>Note. 该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。” 虽然option不像空input，但还是比较特别的。较新的 CSS 规范中没有明确的定义。

在实践中，浏览器大多忽略控制元素:before和它们的子元素。使用 Firefox、IE、Chrome 进行的测试表明，当前只有 Firefox 实现，并且仅当元素“打开”时（聚焦以便打开选项列表或具有值大于 1 的属性）。:afterselectoption:before { content: ... }selectsize

所以这种方法是不可行的，你应该考虑一个更好的方法来处理最终的问题。显然，您已经发现可见标签比使用生成的内容更受欢迎。

于 2013-10-16T18:42:45.560 回答