<select> 是否有合适的 :active 选择器？

Question

我的 select 框后面有一个向上箭头，就像这样

.select-pokemon:after {
    content: "^";
}

然而，当 select 框显示其选项并且被 selected 时，我希望箭头显示一个 (x) 图标。我试过了

.select-pokemon:active:after {
     content: "x";
}

但这只会在我直接点击 select 框时发生变化，当我停止点击但选项仍然显示时，内容会变回“^” 有没有办法保持图标 "x" 而 select 框显示其所有选项？

Answer 1

使用 JQuery 非常简单，您可以控制所需的行为。会显示一个 ^，当您单击 select 时会显示一个 X，当您单击一个选项时，会返回 ^：

在此处查看 fiddle 演示以及另外两个示例 http://jsfiddle.net/manzapanza/hgpgtme5/

HTML:

<div class="after-b"></div>
<select name="bbb" class="select-pokemon-b">
    <option>A</option>
    <option>B</option>
    <option>C</option>    
</select>

CSS:

.after-b{
    float: left;
    margin-right: 100px;
}
.after-b:after{
    content: "^";
}
.after-b.a:after{
    content: "x";
}

JS:

$('.select-pokemon-b').focus(function(){
    $('.after-b').toggleClass('a');
});
$('.select-pokemon-b').change(function(){
    $('.after-b').toggleClass('a');
});

Answer 2

你应该使用 :focus。

.select-pokemon:focus:after {
     content: "x";
}

这应该可以解决问题。

<select> 是否有合适的 :active 选择器？

Does <select> have a proper :active selector?

html

css

css-selectors