在下拉列表中使用 :before 和选项元素答案

【问题标题】：using :before with option element in a drop down list在下拉列表中使用 :before 和选项元素
【发布时间】：2013-10-16 18:10:31
【问题描述】：

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

排序方式：选项1

当您关闭并打开下拉菜单时，您会看到选项 1、选项 2 等

我发现了这个：

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

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

option:before{
 content:"before option"
}

作为一个规则，任何效果。

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

【问题讨论】：

尝试添加 display: block;
您是否有理由不能为文本使用标签而不要单独选择？
设计实际上在下拉菜单中
display:block 似乎对我不起作用 - 它对你有用吗？

标签： html css

【解决方案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());
});

【讨论】：

【解决方案2】：

在 CSS 2.1 规范中，:before pseudo-element 的定义有些模糊，它说：“注意。 该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。”虽然option 不像input 那样为空，但还是比较特别的。较新的 CSS 规范中没有明确的定义。

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

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

【讨论】：