<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>有一個適當的：主動選擇器？

回答

相關問題