Ask A Peer
Posts: 0
Joined: Tue Oct 14, 2014 3:57 am

Changing icon colors on click/tap

I have a list item and would like to dynamically change the icon color from the default gray to another color whenever the user taps on that list item.

I can use javascript but I can't figure out a way to change the icon color, because no color option seems available for the icon

Thank you!

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Changing icon colors on click/tap

Hello!

You may create the other icon (with the different color) and change it, when it is clicked. These posts should be helpful for you:
https://getsatisfaction.com/apperyio/...
https://getsatisfaction.com/apperyio/...
https://getsatisfaction.com/apperyio/...

Ask A Peer
Posts: 0
Joined: Tue Oct 14, 2014 3:57 am

Changing icon colors on click/tap

Thanks for your help. I've spent over 2 hours with no luck... :(

I can change the class name in the selected listitem to another icon.

However since I would need to change the icon color rather than the icon type, I created a custom css icon in the style page, and replaced the class name ui-icon-star to ui-icon-custom, with no success.

Any other hint?

Ask A Peer
Posts: 0
Joined: Tue Oct 14, 2014 3:57 am

Changing icon colors on click/tap

In case someone needs this, here's what I did to make it work:

1) defined a custom background in the css stylesheet.
ui-btn-icon-right:after is the default class that needs to be overridden (it may be -left, -top, etc. in your case)

.ui-btn-icon-bookmarked.ui-btn-icon-right:after{
background-color: red !important;
}

2) added the class .ui-btn-icon-bookmarked to the listitem that contains the icon to be updated with the red color

this.className += " ui-btn-icon-bookmarked";

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Changing icon colors on click/tap

Ask A Peer,

Thank you for the update, glad it works!

Return to “Issues”