Question

我的选择框后面有一个向上箭头

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

但是当选择框显示其选项并被选中时，我希望箭头显示（x）图标。我试过了

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

但这只会在我直接点击选择框时发生变化，当我停止点击但仍显示选项时，内容会更改回＆＃34; ^＆＃34;有没有办法保持图标＆＃34; x＆＃34;选择框是否显示了所有选项？

Answer 1

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

在这里查看一个小提示演示，其中包含两个示例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>是否具有正确的：活动选择器？</select>

2 个答案: