Adding CSS rectangle within dropdown menu options

Question

I'm trying to add a small rectangle filled with color to the inside of a dropdown menu but it's not working. Ideally the option would looks like "red |||||" where the |||| would be a red rectangle. Here is the relevant HTML that isn't working (I'm aware that it currently makes all the rectangles red):

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

And CSS:

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

You can't inject inside the option - to create this specific design you should implement the select with divs and spans instead of — EladBash, Oct 06 '19 at 13:30
Noted, thanks for the response. I guess I will play around with trying to reconfigure the form to use div and span. I wonder if I can still use "option." — garson, Oct 06 '19 at 13:35
visit https://stackoverflow.com/a/7208814/6686121 it is possible with custom style css — almog kashany, Oct 06 '19 at 13:36

dnaz · Answer 1 · 2019-10-06T14:23:05.357

How about this,

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

And 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;
    }

Unfortunately that doesn't work for me - thanks for trying though — garson, Oct 07 '19 at 00:55

score 0 · Answer 2 · answered Aug 24 '21 at 08:51

0

you must use list instead select option that because option doesn't accept childrin try this: create box color in combobox option

answered Aug 24 '21 at 08:51

NTIC TECH

116
1
9

Adding CSS rectangle within dropdown menu options

2 Answers2