如何填充css中的选择选项下拉列表
提问于 2022-09-26 05:25:57
我试图在html中填充一个下拉菜单(select-option)，该菜单从css文件中检索选项。为此，我为每个选项定义了一个自定义类，并在css文件中使用CUSTOM_CLASS::after{content: "";}语句编写了选项标签。
例如，下面是下拉列表选项的定义：
<option class="OPTION1_LABEL"></option>下面是css：
.OPTION1_LABEL::after{content: "Option 1";}
.DROPDOWN_TITLE::after {
content: "Select option from dropdown";
}
.OPTION1_LABEL::after {
content: "Option 1";
}
.OPTION2_LABEL::after {
content: "Option 2";
}
.OPTION3_LABEL::after {
content: "Option 3";
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<span class="input-group-text DROPDOWN_TITLE"></span>
</div>
<div class="col">
<select class="form-control" id="myDropdown">
<option class="OPTION1_LABEL"></option>
<option class="OPTION2_LABEL"></option>
<option class="OPTION3_LABEL"></option>
</select>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
https://jsfiddle.net/fm623k48/
但是，下拉菜单没有填充。我该怎么解决呢？
回答 1
Stack Overflow用户
发布于 2022-09-26 05:47:28
Select是一个控件元素，浏览器通常忽略控件元素及其子元素的:before和:after。所以很可能这是不可能的。如果无法编辑HTML，可以尝试使用JS填充select。
或者，如果您真的需要使用CSS伪content填充选择，可以尝试使用getComputedStyle()方法，但它也是JS
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73854844
复制![[Excel技巧]创建下拉列表](https://developer.qcloudimg.com/http-save/yehe-7215932/e8a502e6cd0882220ca606c02ff21d78.png)
腾讯云开发者
