How to change the color of a FLAT-UI select without using less?

Question

How to change the color of a FLAT-UI select without using less?

Navigation

#1 by (2 votes)

4

Is it possible to change the color of a select (from data-toggle select, including options) of Flat-UI by CSS without using less ?.

In this FIDDLE that @dHEKU posted in the comments, the color of select default has already been modified, but the options , mostly is missing the color of the option that appears when select is opened.

I have tried in some ways:

.select .select-primary {

    background-color: #000066;
}
select {

    background-color: #000066;
}

But it did not work. The HTML looks like this:

<label class="control-label" for="select">
<select id="select" name="selectname" class="form-control select select-primary" data-toggle="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select></label>

html html5 twitter-bootstrap flat-ui

asked by anonymous 19.06.2015 / 22:32

1 answer

Sending data from one table to another with the deleted command Questions about Stored Function

score 2 · Accepted Answer

I was there to take a look at jsFiddle and I could see where this style is applied. To change the color from background green to another color, simply apply this piece of CSS code:

/* Muda a cor verde para preto */
.select2-drop .select2-highlighted>.select2-result-label {
    color: #fff;
    background: #000;
}

However when posting my answer here using Code-Snippet I noticed that this CSS is not being applied, probably because of the style order. So we'll have to use a !important to force to force this to work in either situation:

/* Muda a cor verde para preto */
.select2-drop .select2-highlighted>.select2-result-label {
    color: #fff;
    background: #000 !important;
}
/* Necessário por causa do !important adicionado anteriormente */
.select2-result-selectable .select2-result-label:hover,
.select2-drop .select2-result-selectable .select2-result-label:active {
    background-color: #e1e4e7 !important;
}

Here's an example below and here's a jsFiddle sample if you prefer.

/* Muda a cor verde para preto */
.select2-drop .select2-highlighted>.select2-result-label {
    color: #fff;
    background: #000 !important;
}
/* Necessário por causa do !important adicionado anteriormente */
.select2-result-selectable .select2-result-label:hover,
.select2-drop .select2-result-selectable .select2-result-label:active {
    background-color: #e1e4e7 !important;
}


.select-exemploa .select2-choice {
    color: #fff;
    background-color: #E87E04;
}
.select-exemploa .select2-choice:hover,
.select-exemploa .select2-choice.hover,
.select-exemploa .select2-choice:focus,
.select-exemploa .select2-choice:active {
    color: #fff;
    background-color: #F4B350;
    border-color: #d35400;
}
.select-exemploa .select2-choice:active {
    background: #F9690E;
    border-color: #d35400;
}
.select2-container-disabled.select-exemploa .select2-choice,
.select2-container-disabled.select-exemploa .select2-choice:hover,
.select2-container-disabled.select-exemploa .select2-choice:focus,
.select2-container-disabled.select-exemploa .select2-choice:active {
    background-color: #F9690E;
    border-color: #d35400;
}
.select-exemploa .select2-choice .select2-arrow {
    border-top-color: #fff;
}

.select-exemploa {
    margin-top: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkrel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css">
<link rel="stylesheet" type="text/css" href="http://designmodo.github.io/Flat-UI/dist/css/vendor/bootstrap.min.css">
<script type="text/javascript" src="http://designmodo.github.io/Flat-UI/dist/js/flat-ui.min.js"></script><scripttype="text/javascript" src="http://designmodo.github.io/Flat-UI/docs/assets/js/application.js"></script><selectclass="form-control select select-exemploa" data-toggle="select">
    <option value="0">Choose hero</option>
    <option value="1">Spider Man</option>
    <option value="2">Wolverine</option>
    <option value="3">Captain America</option>
    <option value="4" selected>X-Men</option>
    <option value="5">Crocodile</option>
</select>