Question

我正在尝试使用css在下拉列表中向所选选项添加内容，同时关闭下拉菜单。具体来说，我希望下拉菜单

排序依据：Option1

关闭时以及打开下拉列表时，您会看到选项1，选项2等

我发现了这个：

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

显示了如何将样式应用于正确的东西，但是当我尝试应用时：在选项元素之前，在任何情况下都不会出现任何内容。也就是说，我似乎无法使用

option:before{
 content:"before option"
}

作为任何效果的规则。

选项元素总是如此吗？我还发现我无法在span类中包装选项文本，所以我不能这样做。

Answer 1

您应该使用<label>来表明<select>的用途。您不能在<option>元素上使用伪元素，因为只有<option>元素在<select>中有效。您不希望这样做的另一个原因是因为屏幕阅读器通常会跳过伪元素，使得标签不能被部分或群体以及某些辅助技术访问。

这是将标签（例如“排序方式”）与下拉列表相关联的正确方法：

Demo

<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在下拉列表中注入标签：

Demo

$('option').each(function () { $(this).text("Sort by: " + $(this).text()); });

Answer 2

在CSS 2.1规范中，:before pseudo-element有点含糊不清，它说：“注意。此规范没有完全定义以下的交互：在更换之前和之后元素（例如HTML中的IMG）。这将在未来的规范中更详细地定义。“虽然option不像input那样是空的，但它仍然相当特殊。新的CSS规范中没有明确的定义。

在实践中，浏览器通常会忽略:before和:after等控制元素，例如select及其子级。使用Firefox，IE，Chrome测试显示当前只有Firefox实现option:before { content: ... }，并且仅当select元素是“打开”时（要么专注于打开选项列表或具有size值大于1的}属性。

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

使用：之前使用下拉列表中的选项元素

2 个答案: