How to select color depending on select select?

Question

Bootstrap

Hello. I don't know how to describe it normally, but actually there is:

<div class="form-group">
                                        <label for="items">Товар:</label>
                                        <select id="items" name='items' class="form-control">
                                            <option value="" class="form-control1"></option>
                                            <option value="Товар1" class="form-control1">Товар1</option>
                                            <option value="Товар2" class="form-control1">Товар2</option>
                                            <option value="Товар3" class="form-control1">Товар3</option>
                                        </select>
                                    </div>
                                </div>

When the very first element is selected, i.e. empty - the background color should be #ffffff, and when any of the following is selected, the background color should be any other.

css did like this, but it doesn't work (((

.form-control{
   background-color: #ffffff!important;
}

.form-control1{
   background-color: red!important;
}

How can I fix it???? Thanks

Answer 1