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

First Lets get one thing straight we can’t create what you desire in IE because it doesn’t allow anything other than , tags inside

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

}

1

2

3

4

5

1

2

3

4

5

Fiddle如果你想要一个.

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