Question

我必须在＆＃34;选择＆＃34;的每个选项的右侧添加彩色镶边框。

我的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个元素。

请注意，我没有机会编辑select html（可能是php），所以我必须通过CSS或jQuery来编辑它。

Answer 1

短吻......

您无法将:pseudo元素添加到inputs和image元素。

<强>替代吗

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

$("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>

在＆＃34;上添加：after元素;选择＆＃34;选项

1 个答案: