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 06, 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 07, 2013 4:54 AM
    Wednesday, November 06, 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 07, 2013 4:54 AM
    Thursday, November 07, 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 07, 2013 4:54 AM
    Wednesday, November 06, 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 07, 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 07, 2013 4:54 AM
    Thursday, November 07, 2013 4:54 AM