Select multiple with background image

Alright here's the deal. I have a <select multiple> tag with a background image. So now whenever I scroll down, the background image does not move up with the text. And I get this effect:

The left pic is before and the right is after I scroll

I want it to move up when I scroll down. So that each line stays with the same color.

Any sugg开发者_运维技巧estions on how do I do that?

---

Why not directly apply background colors for each row?

<option style="background-color: #FFF">...</option>
<option style="background-color: #EEE">...</option>

This works just fine (use css classes instead of the style attribute)

---

Not an answer to your question, but wouldn't it be more desirable to give each option an individual background colour instead?

Primitive JSFiddle example

The background image approach is bound to fail e.g. if the user increases the font size.

---

I'm not sure if it works on select elements, but possibly:

option:nth-child(odd) {
    Background-color: #ffa;
 }

Or, with jQuery (for less compliant/modern browsers):

$('option:nth-child(odd)').css('background-color','#ffa');

Using a background-image for the select to simulate zebra-striping is unlikely to work reliably across different browsers, font-sizes, platforms...

---

You can achieve that using jquery's odd or even selectors.

For example if you have an <ul> </ul>

<ul id="list">
    <li>Bla bla</li>
    <li>Bla bla 2</li>
    <li>Bla bla 3</li>
    <li>Bla bla 4</li>
    <li>Bla bla 5</li>
</ul>

$('#list li:odd').addClass('odd');

This will add a class="odd" to the li elements like this (2, 4, 6, 8, 10 etc.) Then you can style the .odd class as you wish.