<select>有一个适当的：主动选择器？

我有然而，当选择框显示出它的选项的向上箭头放置后，我的选择框，像这样<select>有一个适当的：主动选择器？

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

并且选择我想要的箭头以显示（x）的图标。我曾尝试

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

但这只是改变时，我已经直接点击选择框，当我停止按动快门，但选项仍然显示的内容变回“^”有没有办法让图标“x”，而选择框显示所有选项？

来源

2015-02-11 mary_berry

我想你可能需要javascript/jquery来实现你所描述的内容。例如，当单击选择框时，您可以在div上切换额外的类，例如class ='select-pokemon hasX' – Candlejack 2015-02-11 10:31:35

您实际上不能拥有**任何**类型'：after' /'：before'内容在'select'元素中，因为它们是被替换的元素。你必须使用某种插件来替换'select'元素或其他东西。 – 2015-02-11 10:32:14

...或者这是当前浏览器的具体内容吗？ – MrWhite 2015-02-11 10:33:36

使用JQuery非常简单，您可以控制所需的行为。 a ^显示，当你点击选择显示一个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'); 
});

来源

2015-02-11 11:05:11 manzapanza

您应该使用：focus。

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

这应该做的伎俩。

来源

2015-02-14 08:08:04 Andrew

<select>有一个适当的：主动选择器？

回答

相关问题