How to disable select box hover color on css

Question

I want to disable the lightblue color in select box on mouse hovering...... I don't want the blue color on mouse hover. Here is the fiddle

.select_box
{
    color: white;
    background-color: red;
}

.itemone
{
    background-color: red;
}

.itemone:hover
{
    background-color:red;
}

.itemtwo
{
    background-color: green;
}

Have a look at this [Changing Select Highlight Color](http://stackoverflow.com/questions/1667086/changing-select-highlight-color). — geekchic, Aug 10 '13 at 12:13

score 1 · Accepted Answer · answered Aug 10 '13 at 12:28

1

The blue color, is the default color rendered by each browser.

You can moved to plugin like chosen

answered Aug 10 '13 at 12:28

Praveen

55,303
33
133
164

@HakanErbaslar I'm glad I was able to help. – Praveen Aug 10 '13 at 12:33

score 0 · Answer 2 · answered Aug 10 '13 at 12:22

0

The rendering for the select class is done by the browser it self. So there isn't much you can do with that. However, you could choose to build your own dropbox using jQuery.

    <div class="select">
    <ul>
        <li class="option darr">Dropdown one</li>
        <li class="option">Dropdown two</li>
        <li class="option">Dropdown three</li>
    <ul>
</div>

$('.select ul li.option').click(function() {
    $(this).siblings().toggle().removeClass('darr');
    $(this).addClass('darr');
});

This useful fiddle should help. (I'm not the author).

answered Aug 10 '13 at 12:22

geekchic

2,371
4
29
41

No. There is no selectbox here. Just 3 div's. This is not the answer of my question. please delete this answer. – Ali Çarıkçıoğlu Aug 10 '13 at 12:25
That is the point. You can't disable the light blue colour if you use the select box. The browser renders it that way by default. – geekchic Aug 10 '13 at 12:27

How to disable select box hover color on css

2 Answers2