Menu
How do I change the blue highlight on this dropdown please?
link to select box demo
I'd like to change the highlight color to gray if this is possible.
select { border: 0; color: #EEE; background: transparent; font-size: 20px; font-weight: bold; padding: 2px 10px; width: 378px; *width: 350px; *background: #58B14C; -webkit-appearance: none; } #mainselection { overflow: hidden; width: 350px; -moz-border-radius: 9px 9px 9px 9px; -webkit-border-radius: 9px 9px 9px 9px; border-radius: 9px 9px 9px 9px; box-shadow: 1px 1px 11px #330033; background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C; }<div id="mainselection"> <select> <option>Select an Option</option> <option>Option 1</option> <option>Option 2</option> </select> </div>
704
To change the selected option background-color CSS style, we can set the style attribute of the select and option elements. to set the whole select element to background color 009966 and color FFF . Then we override the the styles in the option elements with style="background: white; color: black;" .
To change the color of the highlighted-text, simply target the ::selection selector and then define the color of the background property.
Answer: Use the CSS ::selection pseudo-element By default, when you select some text in the browsers it is highlighted normally in blue color. But, you can disable this highlighting with the CSS ::selection pseudo-element.
Yes, you could change the background of select but you will not be able to change the highlight color (when you hover) by using CSS!
You have few options:
Is to convert select into ul, li kind of select and do anything you want with this.
Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
