Adding an :after element on "select" options

Question

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

My html code is:

<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>

and my 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;
}

Unfortunately, no :after element appears on html.

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.

@BrainFooLong i suppose every question is a dupe of itself ("Kappa") — Kaddath, Feb 26 '18 at 16:03
Holy moly, sorry. This -> :) https://stackoverflow.com/questions/9198195/how-can-i-use-the-css-pseudo-element-before-content-to-affect-an-option — Brain Foo Long, Feb 26 '18 at 16:06
You will need to create a custom select with divs and such and you will need to edit the html — Huangism, Feb 26 '18 at 16:12

Red · Accepted Answer · 2018-02-26T16:07:04.300

2

Short anwser

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

Alternative?

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

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

Snippet

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

edited Feb 26 '18 at 16:07

answered Feb 26 '18 at 16:00

Red

6,599
9
43
85

Unfortunately you are right, this can't be done like this, I'll try this https://stackoverflow.com/questions/33278614/using-css-to-change-select-list-option-background-color-of-each-option-value instead – Giannis G. Feb 27 '18 at 09:00

Adding an :after element on "select" options

1 Answers1

Linked