Bootstrap drop down list:hover

Question

I have a problem with google chrome and bootstrap's css

So this is the thing, in HTML i just set the class of bootstrap

<div id ="SiteLanguage" style="margin-top:10px">            
    <asp:DropDownList 
        CssClass="selectpicker btn btn-primary dropdown-toggle" 
        id="ddlSiteLanguageSelect" 
        runat="server" AutoPostBack="true"
        OnSelectedIndexChanged="ddlSiteLanguageSelect_IndexChanged"> 
    </asp:DropDownList>            
</div>

And in CSS i override bootstrap's properties

select > option:checked, select > option:hover
{
    box-shadow: 0 0 10px 100px #dc6900 inset;
    background-color: #dc6900;
}

.selectpicker:hover, .btn:hover, .btn-primary:hover, .dropdown-toggle:hover, .dropdown-content a:hover
{
    background-color: #dc6900;
}

And in Mozzila it looks awesome, as it was intended, hover color is dark orange

But in Google Chrome ... for some reason, from somewhere, on hover it's dragging blue color and i can't figure it out from where ...

So after days of trying, googling, changing and switching ... I ran out of ideas what to do here. Can you toss me some advice please?

Thank you

Edit :

I uploaded problem to http://s000.tinyupload.com/index.php?file_id=47969215008672622206

Google drive link : https://drive.google.com/file/d/0Bza939idb7sJcmluWVhnX2VzNFE/view?ts=5785f7b5

In Style folder : main file is Upitnici.css , scripts folder just contains libraries

If you open Problem.html in Mozzila you'll see everything ok, In google chrome you you'll see hovering on options having blue background color

Thank you!

Just so you know; if you make a snippet with working code, people are usually more eager to help you out. You can use the generated HTML and CSS code, see how we alter it, and change your code accordingly. — Randy, Jul 12 '16 at 07:31
the behavior you want is not possible see http://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html — Ismail Farooq, Jul 12 '16 at 07:38
Possible duplicate of : http://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html/ — mirza, Jul 12 '16 at 07:49
There are so many duplicates of this question that I might think OP has not even tried to google the answer before asking. Another duplicate in addition to the ones mentioned before http://stackoverflow.com/questions/19388011/how-to-change-colour-of-blue-highlight-on-select-box-dropdown — thepio, Jul 12 '16 at 08:02
I googled this and tried to work it out for past month, problem is that hope dies last ... which is reason of me asking this question — Veljko89, Jul 12 '16 at 08:04
@Veljko89: can you upload your source to another place, google drive or dropbox should be better. My firewall block your link :) — trungk18, Jul 12 '16 at 17:15

score 1 · Accepted Answer · answered Jul 12 '16 at 07:46

If its a select dropdown you could change the background of select but you will not be able to change the highlight color (when you hover) by using css! (For Chrome & other Webkit browsers)

You might want to change the select block into an ul, li construct.

score 1 · Answer 2 · edited May 23 '17 at 11:45

Currently there is no way to apply a css to get your desired result . Why not use libraries like choosen or select2 . These allow you to style the way you want.

If you don want to use third party libraries then you can make a simple un-ordered list and play with some css.Here is thread you could follow

How to convert <select> dropdown into an unordered list using jquery?

Source: https://stackoverflow.com/a/17742187/1194797

score 1 · Answer 3 · answered Jul 12 '16 at 07:50

1

You can't in pure css.

But you can use https://github.com/silviomoreto/bootstrap-select or https://select2.github.io/

answered Jul 12 '16 at 07:50

Diego Betto

721
6
19

score 1 · Answer 4 · answered Jul 13 '16 at 11:35

1

@Veljko89: Received your source and it cannot be done in Google Chrome. I saw you implemented by an inset box shadow but this approach work with FF only. Like so many answer, it is better to find another solution, e.g a custom select creating by div and list inside.

answered Jul 13 '16 at 11:35

trungk18

19,744
8
48
83

Thank you for trying at least ... hopefully Chrome will enable this soon – Veljko89 Jul 13 '16 at 11:47

score 0 · Answer 5 · answered Jun 28 '16 at 09:26

0

seem like another class is overriding your css code, so you can use !important tag for set high priority

select > option:checked, select > option:hover
{
    box-shadow: 0 0 10px 100px #dc6900 inset;
    background-color: #dc6900 !important;
}

answered Jun 28 '16 at 09:26

Tharaka Nilupul Dharmabandu

386
3
16

check wherether asp:DropDownList tag generating as HTML Select tag – Tharaka Nilupul Dharmabandu Jun 28 '16 at 09:55
Yes, it is generated as Select tag ... – Veljko89 Jun 28 '16 at 10:10

score 0 · Answer 6 · answered Jul 12 '16 at 07:42

0

Remove > and Try this

select  option:checked, select  option:hover
{
    box-shadow: 0 0 10px 100px #dc6900 inset;
    background-color: #dc6900;
}

answered Jul 12 '16 at 07:42

Piyush.kapoor

6,715
1
21
21

I tried it and that only gives :checked color, but on :hover it's still blue. I uploaded code, you can find link at question, maybe it gives you some idea – Veljko89 Jul 12 '16 at 07:45

Bootstrap drop down list:hover

6 Answers6