1

In Either jQuery or CSS:

I am using google translate and trying to get the hover to work on the select dropdown. I am close but do not have it how I need to have it. When I hover on top of the select I want select language to be color #18BA9B and not have the blue that highlights all around the select button just the text and the arrow should be color #18BA9B. Then when the drop down is selected all the languages should still be color #687074; except when hovered it should be white with the highlight color #18BA9B.

Will someone please tell me how to fix this problem? Unfortunately it is highlighting the entire dropdown as teal.

http://jsfiddle.net/bobrierton/013v4p0t/1/

.goog-logo-link {
  display:none !important;
} 
.goog-te-gadget{
  color: transparent !important;
}
SELECT.goog-te-combo{
  color: #687074;
  text-transform: uppercase;
}

SELECT.goog-te-combo:hover{
  color:#18BA9B;
}

.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
   color:#18BA9B;
}

I have also tried:

SELECT.goog-te-combo > option:hover{
                background-color:#18BA9B;
                color:white;
            }
David Brierton
  • 6,977
  • 12
  • 47
  • 104
  • 1
    AFAIK it is currently impossible to style the options of a select box. Maybe you can try using some custom select box/dropdown libraries. They combine style-able elements into a fake select box and thus can be styled. – AVAVT Dec 08 '15 at 18:11
  • well I was trying that too but I can figure out how to combine the bootstrap button I created with the google translate button that already exists – David Brierton Dec 08 '15 at 18:12
  • Hmm I can't tell much without some real code to tweak on. Maybe you can open another question to try out that direction. Maybe I or someone will know what to do. – AVAVT Dec 08 '15 at 18:15
  • As @AvAvt pointed out. Check [here](http://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html) – sandeep s Dec 08 '15 at 18:16
  • Urgh can't really chat now since I'm under surveillance at work. Sorry friend ._. – AVAVT Dec 08 '15 at 18:23
  • its ok thanks anyways – David Brierton Dec 08 '15 at 18:25

1 Answers1

0

What you're trying to accomplish is not possible. You could use something like the "Chosen" plugin however: http://harvesthq.github.io/chosen/, which gives you design control with CSS.

JesseEarley
  • 1,036
  • 9
  • 20