在"select"上添加一个:after元素.选项 [英] Adding an :after element on "select" options

问题描述

我必须在选择"的每个选项的右侧添加带有彩色边框的框.

I have to add colored bordered boxes at the right of each option of a "select".

我的html代码是:

<select id="" name="" size="0" class="">
<option value="label_0" class=" level-label"></option>
<option value="241" class="has-no-children" selected="selected">White</option>
<option value="242" class="has-no-children">Black</option>
<option value="243" class="has-no-children">Red</option>
</select>

和我的CSS:

select option {
   position: relative;
}

select option:after {
   content: "";
   width: 10px;
   height: 10px;
   border: 1px solid #222;
   background-color: white;
   display: inline-block;
   position: absolute;
}

select option:nth-child(2):after {
   background-color: black;
}

select option:nth-child(3):after {
   background-color: red;
}

不幸的是，html上没有:after元素.

Unfortunately, no :after element appears on html.

请注意，我没有机会编辑选择的html(可能是通过php)，因此我只能通过CSS或jQuery进行编辑.

Note that I don't have the opportunity to edit the select html (by php probably), so I have to make it by CSS or jQuery only.

推荐答案

短锚杆

您不能将:pseudo元素添加到inputs和image元素.

You can't add :pseudo elements to inputs and image elements.

替代?

好吧，您可以使用jquery.但这仍然不适用于option元素.

Well, you could use jquery. But this still won't work on the option element.

$("select").after("Hello");

代码段

$("select").after("Hello");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="" name="" size="0" class="">
<option value="label_0" class=" level-label"></option>
<option value="241" class="has-no-children" selected="selected">White</option>
<option value="242" class="has-no-children">Black</option>
<option value="243" class="has-no-children">Red</option>
</select>

这篇关于在"select"上添加一个:after元素.选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！