Monaca Onsen UI Discord Chat Github Repo

How can I invert the colors of an ons-list-item when it's tapped on?



  • Is there a way to invert the colors of an ons-list-item when tapped on, e.g. when the tap starts (i.e. when user starts touching the screen) and revert back to normal colours when the tap ends (i.e. user lifts their finger from the screen)?

    Code is pretty standard:

    <ons-list-item tappable>
         <div class="left">
    	   <img class="list-item__thumbnail" src="img/MyIcon.png">
         </div>
         <div class="center">
              Some text
         </div>
         <div class="right">
    	<i class="fa-solid fa-circle" style="color: blue"></i>
         </div>
    </ons-list-item>
    

    I’ve tried using the touchstart and touchend events then changing the one-list-item CSS color and background properties with partial success but find the ends of the list item don’t change color due to padding and offsets etc. Wondering if there is a better way?

    Thanks