我正在尝试在内容之前添加一些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 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>
Fiddle如果你想要一个.
希望这对你们来说很方便…
