How to add different color of option value inside form-select?

Question

I am trying to have the calendar name to be black , and only the spot ● should be in color(RED, BLUE, GREEN AND YELLOW). Here is my code .

                                                        @change="selectedCalendar($event)"
                                                        class="form-select form-select-lg"
                                                        aria-label=".form-select-lg example">
                                                        <option  v-for="calendar in edit.calendars"
                                                            :value="calendar.calendar_name"> <i class="fas fa-circle" :style="{color:calendar.calendar_color}" ></i>
                                                                <span>[[calendar.calendar_name]]</span>
                                                        </option>
                                                    </select>

I want a solution like this picture expected output

Answer 1

You can´t, you can use other component like dropdown and using a list to do the circles, or you have to use some plugin like select2 and you will have the expected output

https://select2.org/