Clever Geek Handbook

In WinJS Windows 8 app, how to change highlight color of selected item in list?

I want to change the CSS style when a WinJS Listivew element is selected, for example in the picture.

Enter image description here

Basically, I want the purple part to be grayed out, and this has to be done via CSS, I think because we are in WinJS.

win-selectionborder
win-selectionbackground
win-selectionhint
win-selectioncheckmark
win-selectioncheckmarkbackground

I've tried all of them, but they all produce strange results, changing everything except this one.

+3


source to share


4 answers


Here are images from chapter 5 of my free book, Programming Windows Store Apps with HTML, CSS, and JavaScript, Issue 2 , where I show you how all the styles are associated with a checkbox. It's specifically in the Style Gallery: WinJS Controls section. In these images, I am showing the default style versus the custom style. You will see that the trick does indeed have the correct selectors for the style hierarchy, as it is often not just one class that you should be referring to. Also note that using .win-selectionstylefilled distinguishes between this and the outline style.

Also note that the styles I'm showing here are not tied to a specific list or page; Gbellman's answer gives some of these.

item container styling 1



item container styling 2

item container styling 3

+3


source


WinJS is a complex maze of CSS. Here's what I recommend. Open the project in the Item inspector (Internet Explorer 10 or 11) through the project. You can then hover your cursor over the element and trace the CSS chain fallback to figure out where the color changes.



This is the only easy way to do it in our project. I ended up having to write a lot of custom CSS to override some of the design elements, but that only worked when I really figured out which properties are inherited, where through CSS ...

0


source


This worked for me:

.pageName .listViewName .win-container .win-selectionbackground {
    background-color: rgb(192, 192, 192); /* your color here */
    color: rgb(255, 255, 255);
}
0


source


Inspect the elements using DOM explorer and look at ui-light.css or ui-dark.css to override some selector.

0


source






More articles:


All Articles