How to style background of selected option in optiongroup

Hi ,

I have a business requirement to style the background-color of the selected option in an OptionGroup (i.e. radiobuttons). Although it is possible to add styles to the OptionGroup it is not possible to style the items added to the group. Is there another way to accomplish this?

I have tried

input[type="radio"] :checked+label{ background: yellow; } .

But that only styles the background of the text following the radiobutton.

The simplest solution (imho) would be to add a class (e.g. selected) to the span surrounding the radio button.


<span class="v-radiobutton v-select-option">
<input type="radio" name="PID120" value="on" id="gwt-uid-1" tabindex="0" checked=""><label for="gwt-uid-1">Select</label></span>

and in the css


.selected {
background : yellow;
}

Any suggestion is welcome.

That sounds like an thing that really can’t be worked around without changing the client side. It’s weird that I haven’t heard of this before, since it’s so obvious :smiley:

I’d suggest you to
create a ticket
at
http://dev.vaadin.com/
(you need an account, if you already don’t have one, but creating one is quick and painless). This is the best guarantee to get it in at some point. It indeed does
seem
like a trivial modification, so it might be added rather quickly too. But one can only hope.