如何使用Bootstrap覆盖选择列表中的选择和选项悬停和颜色？

Question

我在我的项目中使用bootstrap 2.3.2。我有一个select列表，我想要覆盖它的默认蓝色。

我想覆盖一些与hover选项相关的bootstrap类并选择。 我想在:hover，选择上定义自定义颜色，然后点击（:focus和:active。）。

例如，我希望将蓝色更改为某种绿色。如果选择框打开，它应该是相同的;用这种颜色突出显示。

这是我的JSFiddle

以下是我的问题：

请仅建议CSS解决方案;我不想使用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>