ListSelect - Alternating item background colour

Vaadin 6 / 7 / 8 Framework UI
1

Is it possible to style the ListSelect component so that the item background colours alternate, much like in the Table component? (e.g. white and grey:
http://demo.vaadin.com/sampler#TableSorting
)

Unlike the table component there doesn’t seem to be any odd/even class names to style. Looking at the generated HTML for the ListSelect component, each item seems to be contained with its own tag, e.g.

<select class="v-select-select" size="10" style="" tabindex="0">
    <option value="1">first item</option>
    <option value="2">second item</option>
    <option value="3">third item</option>
</select>

However I am stuck as to how to make the background colour on the options alternate.

Any help would be much appreciated. Thanks in advance :slight_smile:

2

ListSelect client-side implementation VListSelect uses GWT ListBox, which doesn’t add this style names to alternating rows.

3

Thanks Johannes, we decided to go with using CSS3 to manually style the options using the nth-child selector.

4

Can you provide a code sample of how you achieved this with CSS3?