Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

How to: Select box colors in Windows 8 store apps (HTML/JS)

Karissa Wingate

Normally I don’t advocate for trying to style form controls in web browsers, but Windows 8 apps have some really offensive colors by default. Figuring out just how to overwrite some of the defaults of ui-light.css and ui-dark.css is quite frustrating, so I’ll explain how to fix the colors of your select boxes.

Here’s the first problem- It’s the color the option turns when it has been already selected and the select box is expanded.

Apply the following CSS and then the result is below:
option:checked {
background-color: rgb(53, 140, 61);
}

Now, when we hover over this selected item, it will change back to purple, it will also affect when you select an item for the first time. It will flash purple as the select box collapses.

I really don’t want it to do that, so we need to use a different selector to make it so it’s also green.

select:focus option:checked:hover {
background-color: rgb(53, 140, 61);
}

Now, when we hover over the selected option, it will look like this.

Great- now one last spot where the purple is showing up. When you’ve released the mouse and the select box is still in focus but contracted.

Blegh. Let’s get rid of that purple once and for all.

select:focus::-ms-value {
background-color: rgb(53, 140, 61);
}

I prefer to smush them all into one single rule:

option:checked, select:focus::-ms-value, select:focus option:checked:hover{
background-color: rgb(53, 140, 61);
}

Obviously, you can break these apart, but I prefer to have them all the same color so there are less flashes of colors changing.

Related Articles

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\