0

I am using bootstrap 2.3.2 in my project. I have a select list, whose default blue color I want to overwrite.

I want to overwrite some bootstrap class related to hover option and select. I want to define a custom color on :hover, selection and clicked(:focus and :active.).

I want to change that blue color into some green color, for example. it should be the same if a select box is open; highlight with that color.

Here's my JSFiddle

Here's the issue I have:

enter image description here

Please suggest only CSS solutions; I don't want to use JavaScript.

select:hover {
    border-color: #2AD2C9;
}
select:active, select.selected {
    border-color: #2AD2C9;
    background-color: #2AD2C9;
}
.yourdropdown ul li:active, .yourdropdown ul li:hover, .yourdropdown ul li:focus {
    background-color: green;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.no-responsive.no-icons.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form class="bs-docs-example">
    <select id="s1" class="yourdropdown">
        <option>dasd adas das dasdsa dsadasdsa</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
    <br>
    <select multiple="multiple" id="s2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</form>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Javascript Coder
  • 5,691
  • 8
  • 52
  • 98
  • 1
    CSS only solutions is not going to work, you've to use *javascript* OR *jQuery* as in your [**Last Que**](http://stackoverflow.com/questions/32310605/how-i-can-change-the-default-blue-color-in-select-list) I suggested you. If you're not satisfied then edit your last que instead of posting another. – vivekkupadhyay Sep 01 '15 at 04:56
  • I want to do this without using javascript or js.. is it possible ?? – Javascript Coder Sep 01 '15 at 05:34
  • I've tried a lot in my case using *CSS* but didn't get any proper solution that will do the trick for all browsers, so No its not. – vivekkupadhyay Sep 01 '15 at 05:35

0 Answers0