Question

I’m building a page in Windows Metro with WinJS. I have a DatePicker JavaScript object which is a basic select/option dropdown in the HTML. I have figured out how to CSS every part of it except for the highlight color of the selected item once you click on the dropdown. Whatever css class or pseudo-element I target, I can’t get at that element. It always remains the default Windows 8 purple.

http://paulkarpenko.com/images/dropdowncolor.png

Let’s say the dropdown is .myDropdown.
I have tried

.myDropdown select        //styles pre-clicked select element
.myDropdown::-ms-value    //styles pre-clicked select label area
.myDropdown::-ms-expand   //styles pre-clicked select down arrow
.myDropdown option        //styles entire dropdown area
.myDropdown option:hover  //styles dropdown area's mouse-hover elements

Please help. How do I style that selected element?

Answer 1

try this – the colors should be garish enough to notice where they come from.

.myDropdown option:checked, .myDropdown:focus::-ms-value {
    color: rgb(255, 255, 255);
    background-color: yellow;
}

.myDropdown option:checked:hover, .myDropdown:focus option:checked:hover {
    color: rgb(255, 255, 255);
    background-color: yellowgreen;
}