How do I remove background / gradient styling from jquery mobile listviews

Question

I'm trying to override the standard styling of a listview li element in jquery mobile. I tried just setting a rule at the end of all the css

li{
background-color:#ffffff;
border:none;
border-bottom: 1px solid #eeeeee;
}

But there are still some styles being applied. I just want a solid background color and no gradient stuff.

If there are any rules regarding these elements with a class/id, such as `li.listview` or `#listview li`, they will override `li`. See [this](http://css-tricks.com/specifics-on-css-specificity/). — Martti Laine, Feb 15 '12 at 05:35

score 3 · Accepted Answer · answered Feb 15 '12 at 06:13

3

Try this:

li{
background:#ffffff !important;
border:none;
border-bottom: 1px solid #eeeeee;
}

This will override the gradient colors created by jQuery Mobile using background-image style

answered Feb 15 '12 at 06:13

user700284

WARNING: This will set the color for all themes, in all states (selected and hover as well). – Daniel Nov 11 '13 at 11:08

score 1 · Answer 2 · answered Feb 15 '12 at 05:31

try adding this to your code...

background-image:url('ANYNONEXISTINGIMAGE');

so, your code would look like this...

li{
    background-color:#ffffff;
    border:none;
    border-bottom: 1px solid #eeeeee;
    background-image:url('ANYNONEXISTINGIMAGE');
}

score 0 · Answer 3 · answered Nov 11 '13 at 13:04

0

If you only want to remove all gradients from the list elements and don't want to overwrite colors, add this line to your li style:

background-image: none !important;

answered Nov 11 '13 at 13:04

Daniel

3 Answers3