4

I have a select list.

It is having its default blue color which I want to overwrite. I want to define custom color on :hover, selection and clicked(:focus and :active.).

I am using bootstrap. I've tried some code but it doesn't work.

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

Here's my JSFiddle

Here' the issue I have:

enter image description here

Please guide me.

vivekkupadhyay
  • 2,851
  • 1
  • 22
  • 35
Javascript Coder
  • 5,691
  • 8
  • 52
  • 98
  • possible duplicate of [HTML – SWiggels Aug 31 '15 at 11:53
  • 1
    In `dropdown` customization I'll recommend to use [*Dropkick](https://github.com/Robdel12/DropKick), due to its easy use and as per your requirement customization. – vivekkupadhyay Aug 31 '15 at 12:26
  • Why this is not working ?? http://jsfiddle.net/7m2sY/37/ – Javascript Coder Sep 02 '15 at 04:52

1 Answers1

0

Play with pseudoelements. You need to make a class .yourdrodown ul li:active, :focus and :hover and set the background color.

For example:

.yourdropdown ul li:active, .yourdropdown ul li:hover, .yourdropdown ul li:focus {
    background-color: green;
}
seenukarthi
  • 8,241
  • 10
  • 47
  • 68