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

Asked

Viewed 593 times

4

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

In this FIDDLE that @dHEKU posted in the comments, the color of the select pattern has been modified, but missing options, chiefly the color of option that appears when the select is open.

I’ve tried a few ways:

.select .select-primary {

    background-color: #000066;
}
select {

    background-color: #000066;
}

But it didn’t work. 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
  • 1

    Hello, I tried to answer, but it seems that the js do flat-ui creates several hidden classes and it turns out that it gets really boring to modify anything. http://jsfiddle.net/bbuxtLkk/ - Just can’t tell which class modifies the option.

  • Thanks for trying @dHEKU. I think there is no way anyway, just using less should be possible, or changing by the color pattern (swatche). Anyway, I think your comment would be valid as a response.

  • 1

    I don’t quite understand... In the jsFiddle example mentioned in the question, what you are trying to change is the background color that is now gray where it says chose hero, spider man ... etc, the color where the orange is or is the color of the dropdown arrow?

  • When you open select, the xmen in green, and when you hover over and then take away from select, the option that was when you left select is in green tbm. That’s mostly it... The color of the transition between options doesn’t even need...

  • And in the example of fiddle already changed the color that appears default (was green)... The background color of tbm options doesn’t need to change, just this really annoying green. :-)

  • 1

    Anything like this? - http://jsfiddle.net/jg6wdvjy/

  • 1

    Yes! That’s right! Put it there as an answer! Thanks!

  • 1

    So @Chun, if you’re excited, I just opened a $100 reward in this question. All for a more fun Friday night! :-)

  • 1

    Hehehe, I was just leaving when I came to this question. it’s already 5:00 in the morning here in Portugal xD tomorrow I see it, now I’m going to sleep. Hugs

Show 4 more comments

1 answer

2


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

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

However by posting here my answer using the Code-Snippet I noticed that this CSS is not being applied, probably because of the order of styles. Then we will have to use a !important for compel that this works in any of the situations:

/* 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 you also have one example in jsFiddle 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>
<link rel="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>
<script type="text/javascript" src="http://designmodo.github.io/Flat-UI/docs/assets/js/application.js"></script>


<select class="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>

Browser other questions tagged html html5 twitter-bootstrap flat-ui

You are not signed in. Login or sign up in order to post.