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

我想添加内容到下拉列表中使用css，当关闭下拉列表中选定的选项。具体来说，我想下拉说使用：之前与下拉列表中的选项元素

排序方式：选项

关闭，当您打开下拉菜单，你再看看选项1，选项2等

，当我发现这一点：

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

其中显示了如何将样式应用于正确的事物，但是当我尝试应用：在选择元素之前，在任何情况下都不显示任何内容。也就是说，我似乎无法使用

option:before{ 
content:"before option" 
}

作为任何效果的规则。

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

来源

2013-10-16 Gilly Ames

尝试添加显示：块; – dezman

您是否有理由不能使用文本标签并单独选择？ –

设计实际上在下拉 –

您应该使用<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()); 
});

来源

2013-10-16 18:20:32

谢谢，不得不问这个问题，但我同意 –

在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）。

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

来源

2013-10-16 18:42:45

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

回答

相关问题