Internet Explorer中選擇標記選項中的CSS偽元素

Question

我正在嘗試::before內容::before將一些CSS ::before添加到<select multiple>的<option>標簽，具體取決於是否選擇了該選項。

以下目前在Chrome和FF中工作正常，但我在IE11中遇到問題。

 select > option::before { display: inline-block; width: 10em; } select > option:checked::before { content: "SELECTED: "; } select > option:not(:checked)::before { content: "excluded: " ; } 

 <select multiple> <option value="1" selected="selected">1</option> <option value="2" selected="selected">2</option> <option value="3" selected="selected">3</option> <option value="4" selected="selected">4</option> <option value="5" selected="selected">5</option> </select> 

我讀過其他SO帖（ 1 ， 2 ， 3 ， 4 ）約在IE偽構件和最似乎指向設置某種position或display屬性，我已經試過。

這是否發生，因為<option>標簽不應包含子元素？

Answer 1

First讓 我們 直截了當， 我們無法在IE中創建你想要的東西，因為它不允許<select>框內的<option> ， <optgroup>標簽以外的任何東西。

在我看來，這是我可以使用CSS only方法的一種解決方法。 如果你喜歡腳本，那么有很多選擇，即使select2是這種類型的自定義最常用的插件之一。

我用[type =“checkbox”]來獲得這個結果

jQuery僅用於顯示值。

 var multyVal = []; $('.multiple input[type="checkbox"]').each(function() { if ($(this).is(':checked')) { var Tval = $(this).val(); multyVal.push(Tval); } }); console.log($('select').val(), multyVal); 

 select>option::before { display: inline-block; width: 10em; } select>option:checked::before { content: "SELECTED: "; } select>option:not(:checked)::before { content: "excluded: "; } .multiple { height: 60px; display: inline-block; overflow-y: scroll; background: #d4d4d4; width: 10em; border: 1px solid #999; margin-left: 10px; } .multiple [type="checkbox"] { display: none; } .multiple label { width: 100%; float: left; font-size: 13px; text-align: right; background: #fff; } .multiple label::before { display: inline-block; float: left; font-family: arial, san-sarif; font-size: 11px; } .multiple [type="checkbox"]:checked+label::before { content: "SELECTED: "; } .multiple [type="checkbox"]:checked+label { background: #666; color: #fff; } .multiple [type="checkbox"]:not(:checked)+label::before { content: "excluded: "; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select multiple> <option value="1" selected="selected">1</option> <option value="2" selected="selected">2</option> <option value="3" selected="selected">3</option> <option value="4" >4</option> <option value="5" >5</option> </select> <div class="multiple"> <input type="checkbox" name="multiple" value="1" id="rad1" checked="checked"> <label for="rad1">1</label> <input type="checkbox" name="multiple" value="2" id="rad2" checked="checked"> <label for="rad2">2</label> <input type="checkbox" name="multiple" value="3" id="rad3" checked="checked"> <label for="rad3">3</label> <input type="checkbox" name="multiple" value="4" id="rad4"> <label for="rad4">4</label> <input type="checkbox" name="multiple" value="5" id="rad5"> <label for="rad5">5</label> </div> 

如果你想要一個小提琴 。

希望這對你們來說很方便...

Answer 2

理想情況下，我正在尋找一個純CSS解決方案，但根據評論和@weBer

<select>標記只能包含：

零個或多個<option> ， <optgroup>和腳本支持元素。

因此，我可能最終會使用如下所示的JavaScript解決方案。

 document.getElementById("multiSelect").onchange = function() { var opts = this.getElementsByTagName("option"); for (var i = 0; i < opts.length; i++) { if (opts[i].selected === true) { opts[i].innerHTML = "SELECTED: " + opts[i].value; } else { opts[i].innerHTML = "excluded: " + opts[i].value; } } }; 

 select { height: 10em; width: 10em; overflow-y: hidden; } 

 <select id="multiSelect" multiple> <option value="1">excluded: 1</option> <option value="2">excluded: 2</option> <option value="3">excluded: 3</option> <option value="4">excluded: 4</option> <option value="5">excluded: 5</option> </select>