Question

我尝试将一些CSS ::before内容添加到<option>的{{1}}代码中，具体取决于是否选择了该选项。

以下内容目前在Chrome＆amp; FF，但我在IE11中遇到问题。

＆＃13;

<select multiple>

＆＃13;

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

＆＃13;

我已经阅读过有关IE中伪元素的其他SO帖子（1，2，3，4），而且大多数似乎都指向设置一些我尝试过的<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>或position属性。

是否会发生这种情况，因为display代码不应包含子元素？

Answer 1

首先让我们直截了当 我们无法在 IE 中创建您想要的东西，因为它没有＆＃39 ; t允许除<option>，<optgroup>标签以外的任何内容一个<select>框。

这是解决方法在我看来，我可以使用 CSS 方法。如果你更喜欢脚本，那么有很多选择，即使select2是这种自定义类型最常用的插件之一。

我使用[type =＆＃34;复选框＆＃34;]来获得此结果

jQuery仅用于显示值。

＆＃13;

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

＆＃13;

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: ";
}

＆＃13;

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

＆＃13;

Fiddle万一你想要一个。

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

Answer 2

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

<select>代码只能包含：

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

因此，我可能最终会使用如下所示的JavaScript解决方案。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: