jQuery Mobile ListView with Gradients as Custom Background

Question

I am trying to style my listview with custom gradients as backgrounds (gradients generated by http://www.colorzilla.com/gradient-editor/ )

I would like each

contain different gradient as background from colorzilla + I would like to double the height of each

Code: http://jsfiddle.net/flymen8888/zgNJy/

Thank you so much for your help! Best

<!-- Start of index page -->
    <div data-role="page">
        <div data-role="content">

        <ul data-role="listview" data-inset="false">
            <li><a href="#">PAGE A</a></li>
            <li><a href="#">PAGE B</a></li>
            <li><a href="#">PAGE C</a></li>
            <li><a href="#">PAGE D</a></li>
        </ul>
        </div><!-- /content -->
        <div data-role="footer" data-theme="d">
    <!-- /footer -->
    </div><!-- /index page -->

Upvotes: 1

Views: 661

Answer 1

Add style to anchors within listview.

.ui-listview a {
  height: 60px;
  background: red; /* or gradient */
}

Demo