Search code examples
htmlonsen-ui

How to change the on-select color in ons-list-item


How do i change on-select color during tap

here is the code.

<ons-list style="background: #ef8697"  >

    <ons-list-item
        modifier="tappable" class="list__item__line-height"
        onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu: true})">
        <i class="fa fa-home fa-lg" style="color: #666"></i>
        &nbsp; Page 1
    </ons-list-item>

    <ons-list-item
        modifier="tappable" class="list__item__line-height"
        onclick="app.slidingMenu.setMainPage('page2.html', {closeMenu: true})">
        <i class="fa fa-gear fa-lg" style="color: #666"></i>
        &nbsp; Page 2
    </ons-list-item>

</ons-list>

go to this screenshot: https://i.sstatic.net/D6c9g.png

on the picture above i want to change the silver color during on-select


Solution

  • You can customize your colors at http://components.onsen.io/

    To change the color of tapped list items you change "Active Background Color". You can then download a CSS files with your new colors.