locked
Styling WinJS Listview selected items color

    Question

  • Hi All...

    I am using .win-selectionbackground to set color for the listview selected item. Now I need to change the color of the text for the selected item. The text color should change to some color when selected and it should restore to its previous color after unselected. How to achieve this?

    Thanks in advance...



    Nazia

    Wednesday, November 6, 2013 6:12 AM

Answers

  • Hello Nazia,

    There is a good article here about styling the ListView, http://msdn.microsoft.com/en-us/library/windows/apps/hh850406.aspx

    You can add the class 'win-selected' to a selector to target the selected item.

    So, the following rule will set the text color for a selected ListView item.

    .win-container.win-selected { color: red; }

    I hope this helps,

    Joel

    • Marked as answer by Nazia Firdouse Thursday, November 7, 2013 4:54 AM
    Wednesday, November 6, 2013 2:02 PM
  • Finally I got it by setting the initial color in .win-container class instead of setting the color within the template and now if I set the color in .win-container.win-selected class, it works fine. Here is the snippet which could be useful to others.

    .win-container {  
        color: gray; 
    }
     .win-container.win-selected {
        color: white;         
    }
    


    Nazia

    • Marked as answer by Nazia Firdouse Thursday, November 7, 2013 4:54 AM
    Thursday, November 7, 2013 4:54 AM

All replies

  • Hello Nazia,

    There is a good article here about styling the ListView, http://msdn.microsoft.com/en-us/library/windows/apps/hh850406.aspx

    You can add the class 'win-selected' to a selector to target the selected item.

    So, the following rule will set the text color for a selected ListView item.

    .win-container.win-selected { color: red; }

    I hope this helps,

    Joel

    • Marked as answer by Nazia Firdouse Thursday, November 7, 2013 4:54 AM
    Wednesday, November 6, 2013 2:02 PM
  • Thanks for the response.

    I tried it but it didn't worked if I set color to the divs within the template. If no color is set for the divs within the template, it works fine. is there any alternative for this?


    Nazia

    Thursday, November 7, 2013 4:34 AM
  • Finally I got it by setting the initial color in .win-container class instead of setting the color within the template and now if I set the color in .win-container.win-selected class, it works fine. Here is the snippet which could be useful to others.

    .win-container {  
        color: gray; 
    }
     .win-container.win-selected {
        color: white;         
    }
    


    Nazia

    • Marked as answer by Nazia Firdouse Thursday, November 7, 2013 4:54 AM
    Thursday, November 7, 2013 4:54 AM