html – Internet Explorer中选择标记选项中的CSS伪元素

概述我正在尝试在内容之前添加一些CSS ::< option> < select multiple>的标签取决于是否选择了该选项. 以下内容目前在Chrome& FF,但我在IE11中遇到问题. select > option::before { display: inline-block; width: 10em;}select > option:checked::before { 我正在尝试在内容之前添加一些CSS ::< option> < select multiple>的标签取决于是否选择了该选项.

以下内容目前在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>

我已经阅读了关于IE中伪元素的其他SO帖子(1,2,3,4),并且大多数似乎都指向设置我试过的某种位置或显示属性.

这是否发生在< option>标签不应包含子元素？

解决方法

First Lets get one thing straight we can’t create what you desire in IE because it doesn’t allow anything other than <option>,<optgroup> Tags insIDe
a <select> Box.

在我看来,这是我可以使用CSS only方法的一种解决方法.如果您更喜欢脚本,那么有很多替代品,即使select2是这种类型的自定义最常用的插件之一.

I Have used [type=”checkBox”] for attain this result

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 >  <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>

Fiddle如果你想要一个.

希望这对你们来说很方便…

总结

以上是内存溢出为你收集整理的html – Internet Explorer中选择标记选项中的CSS伪元素全部内容，希望文章能够帮你解决html – Internet Explorer中选择标记选项中的CSS伪元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。