Internet Explorer中选择标记选项中的CSS伪元素 [英] CSS pseudo elements in select tag options in Internet Explorer

问题描述

我试图在< option> 标签中添加一些CSS :: before 内容<选择多个> 取决于是否选择该选项。

以下目前工作正常Chrome& FF，但我在IE11中遇到了问题。

$ b

select> option :: before {display：inline-block;宽度：10em;}选择>选项：checked :: before {content：SELECTED：;}选择> option：not（：checked）:: before {content：excluded：;}

 <选择多个> < option value =1selected =selected> 1< / option> < option value =2selected =selected> 2< / option> < option value =3selected =selected> 3< / option> < option value =4selected =selected> 4< / option> < option value =5selected =selected> 5< / option>< / select>  

我读过其他SO帖子（ 1 ， 2 ， 3 <一个>， 4 ）关于IE中的伪元素，似乎大多数指向设置某种位置或显示属性，我尝试过。

这是否发生为< option> 标签不应包含子元素？ >解决方案

理想情况下，我一直在寻找纯粹的CSS解决方案，但根据评论和@weBer

$ b < select> 标记只能包含：

零或以上< option> ，< optgroup> 和脚本支持元素。

因此，我最终可能会使用像下面这样的JavaScript解决方案。

  document.getElementById（multiSelect）。onchange = function（）{var opts = this.getElementsByTagName（option）;对于（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;宽度：10em; overflow-y：hidden;}

< select id = multiSelect多个> < option value =1>排除：1< / option> < option value =2>排除：2< / option> < option value =3>排除：3< / option> < option value =4>排除：4< / option> < / option>< / code>< / pre>< / div>< / div>< / p>

I'm trying to add some CSS ::before content to the <option> tags of a <select multiple> depending on if the option is selected or not.

The below is currently working fine in Chrome & FF, but I'm having issues in 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>

I've read other SO posts (1, 2, 3, 4) about pseudo elements in IE and most seem to point to setting some sort of position or display attribute which I've tried.

Is this happening as <option> tags shouldn't contain child elements?

解决方案

Ideally I was looking for a pure CSS solution but as per the comments and @weBer

The <select> tag can only contain:

Zero or more <option>, <optgroup>, and script-supporting elements.

Therefore I will probably end up using a JavaScript solution like the below.

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>

这篇关于Internet Explorer中选择标记选项中的CSS伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！