Добавление CSS-прямоугольника в выпадающее меню

Question

Я пытаюсь добавить маленький прямоугольник, заполненный цветом, внутри выпадающего меню, но он не работает. В идеале вариант будет выглядеть как «красный |||||»где ||||будет красный прямоугольник. Вот соответствующий HTML, который не работает (я знаю, что в настоящее время он делает все прямоугольники красными):

<select class="bootstrap-select btn" name="colorSelect">
        <option name="name0" value="0"  >red<span class="colorRectangle"></span></option>
        <option name="name1" value="1"  >green<span class="colorRectangle"></span></option>
        <option name="name2" value="2"  >blue<span class="colorRectangle"></span></option>
</select>

И CSS:

 .colorRectangle{
        width:30px;
        height:20px;
        background:red;
    }

Answer 1

Как насчет этого,

<select class="bootstrap-select btn" name="colorSelect">
        <option name="name0" value="0"  >red<span class="colorRectangle"></span></option>
        <option name="name1" value="1"  >green<span class="colorRectangle"></span></option>
        <option name="name2" value="2"  >blue<span class="colorRectangle"></span></option>
</select>

И CSS Rules ,,,

.colorRectangle{
        width:30px;
        height:20px;
        background:red;
    }

    .colorRectangle span:after {
    content:"";
    width: 30px;
    height: 20px;
    display: inline-block;

    }

    .colorRectangle span:first-child:after{
    background: red;
    }

      .colorRectangle span:nth-child(2):after{
    background: green;
    }

      .colorRectangle span:last-child:after{
    background: blue;
    }