I use Chosen plugin and as you see in image below, the :hover's color for <li> is a chromatic blue. All I'm trying to do is changing it to red color.

---

I worked on it by Chrome inspect tool and I figured it out which that color es from the highlight class. See:

Ok, I've change it to red, but still <li>'s hover is blue. How can I change it?

Here is the .css file and here is a demo.

I use Chosen plugin and as you see in image below, the :hover's color for <li> is a chromatic blue. All I'm trying to do is changing it to red color.

---

I worked on it by Chrome inspect tool and I figured it out which that color es from the highlight class. See:

Ok, I've change it to red, but still <li>'s hover is blue. How can I change it?

Here is the .css file and here is a demo.

• javascript
• jquery
• html
• css
• jquery-chosen

Share Improve this question Follow edited Jan 27, 2017 at 16:41 stack asked Jan 27, 2017 at 16:41 stackstack 10.2k2222 gold badges7070 silver badges130130 bronze badges 4

• 1 There is :hov at the right top corner in the styles panel. If it's a class and has rules you should find it in the normal list. – Stickers Commented Jan 27, 2017 at 16:42
• @Pangloss Yes I know, I used it and figured it out which hover color is background-color: #3875d7;. I changed it to red. but still it is #3875d7. – stack Commented Jan 27, 2017 at 16:45
• When u mouse over the item and it turns blue it gets a class "highlighted" if you can find this in the css you should be able to edit – Barry Thomas Commented Jan 27, 2017 at 16:46
• @stack From the screenshot I can see it's set in linear-gradient, so that override the background-color. What you can try is background: red none;. – Stickers Commented Jan 27, 2017 at 16:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

See this fiddle

The reason why it wasn't working when you were trying to change the style from your CSS was because, from the inspector, I could see that the styles for .highlighted was applied through an inline CSS which was overriding all the other styles. To overe that, use !important in your CSS.

Also, the blue color that was shown was not just the background-color. Instead, it was a background-image. Thus you will have to override the background-image too..

Thus, add the below given styles to your CSS to change the hover color to red.

.highlighted{
  background-color:red !important;
  background-image:none !important;
}

as Lal said, please check also background-image:

background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#3875d7),color-stop(90%,#2a62bc));
background-image:-webkit-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image:-moz-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image:-o-linear-gradient(#3875d7 20%,#2a62bc 90%);
background-image:linear-gradient(#3875d7 20%,#2a62bc 90%);

There are linear gradients so maybe you want to change blue color #3875d7 to the color you want? You need to change corresponding second color of gradient also {#2a62bc}

Why not just change the color it sets in the CSS that chosen provides for you? Open up the file, ctrl-f color if you need to and just find that blue, swap the # value for a red one that you want.

And if you want to be lazy just find every instance of the blue and change it to red so you don't worry about it sometimes being blue and sometimes red.

You have to override the css. You may define this in your page's css rather than modifying the Chosen CSS because it's not meant to be modified, other developers might need to use the same library in your codebase

  .chosen-container .chosen-results li.highlighted {
       background-color: #dc2951 !important;
       background-image: none;
  }