CODEWITHSUNDEEP
csslistviewjquery-mobilelistviewitem
Kaung Htet
Kaung Htet

Reputation: 587

jQuery Mobile ListView items with Color Indicator

I want to have color indicators for each item in the list view in jQuery Mobile. Not the background color. This might be a piece of cake for most of you but unfortunately, my CSS skills are not very good. Here is a photoshop of what I want to achieve.

enter image description here

According the jQuery mobile docs, the closet I can have is to have thumbnail or list icons by putting a img tag. How can I achieve it? Many thanks!

Upvotes: 0

Views: 4134

Answers (1)

Pablo
Pablo

Reputation: 2854

Try these CSS rules:

#redHero {
  border-left: 5px solid #f00;
}

#greenHero {
  border-left: 5px solid #0f0;
}

According to this code:

<ul data-role="listview" data-theme="b">
    <li id="redHero"><h3>Superman</h3><p>Power:30</p></li>
    <li id="greenHero"><h3>Spiderman</h3><p>Power:30</p></li>
</ul>

See the example here.

Upvotes: 5

Related Questions