Menu
Is there a style for a select option's "selected" color? For example:
<HTML> <BODY> <FORM NAME="form1"> <SELECT NAME="mySelect" SIZE="7" style="background-color:red;"> <OPTION>Test 1 <OPTION>Test 2 <OPTION>Test 3 <OPTION>Test 4 <OPTION>Test 5 <OPTION>Test 6 <OPTION>Test 7 </SELECT> </FORM> </BODY> </HTML> When I select an option it turns blue, I want to override this and make it a different color. In the style I expected something like "selected-color", but it doesn't exist.
243
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;" .
You can style the option elements to some extent. Using the * CSS selector you can style the options inside the box that is drawn by the system.
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.
You cannot change the style for these elements.
A crude way to do it -
var sel = document.getElementById('select_id'); sel.addEventListener('click', function(el){ var options = this.children; for(var i=0; i < this.childElementCount; i++){ options[i].style.color = 'white'; } var selected = this.children[this.selectedIndex]; selected.style.color = 'red'; }, false); 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
