In Windows8 Metro, how can I change the highlight color of the already selected item in a dropdown list

css, microsoft-metro, windows-8, winjs

Solution

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;
}

Problem

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?

Original source