Change background color of "selected" with CSS

Question

I'm trying to change the background color of the selected item but can't get it work.

HTML:

<table class="select_payment_method_table">
<tr>
    <td class="payment_details_cc">
        <input id="visa1" type="radio" name="visa1" value="a1" checked="checked"/> 
        <span class="visa_card_img">&nbsp;&nbsp;Credit Card (VISA / MasterCard)</span>
        <div class="clearfix"></div>
        <div class="payment_img_main"><img src="image.png"></div>
    </td>
</tr>

I tried this, but it doesn't work:

CSS:

.select input[checked]
{
background-color:white;
}

Where is the `.select` class? - It works fine if you include the full class name of the `` (which I assume you meant to do) - http://jsfiddle.net/KcEeW/1/ — Adrift, Aug 16 '13 at 18:11

score 3 · Answer 1 · answered Aug 16 '13 at 18:13

3

Your syntax is a bit wrong (assuming you do have a .select class, because it's not in your HTML):

.select input:checked
{
     background-color:white;
}

For further reading on :checked selector

answered Aug 16 '13 at 18:13

Itay

16,601
2
51
72

1

checked is also an attribute so it's also (a bit ^^) correct. Mmh would it be a way to make it work in IE8 and IE7? Also `[checked]:checked` would be a trick to have more specificity, if needed. – FelipeAls Aug 16 '13 at 18:34
1

I don't think people should still support IE 7 specifically. Anyway, for IE 8 one can use custom JS or polyfills. This thread might be helpful as well: [CSS3 - Style radio inputs using the :checked selector on older browsers (ie7/ie8)](http://stackoverflow.com/questions/7461756/css3-style-radio-inputs-using-the-checked-selector-on-older-browsers-ie7-ie8) – Itay Aug 16 '13 at 18:45

Steven Kohus · Accepted Answer · 2013-08-16T18:23:54.493

2

If you want to select the radio element itself, you could use this:

input[type="radio"]:checked { background-color: blue; }

If you wish to select the background of the element text next to the radio element, then you could use this:

input[type="radio"]:checked+span { background-color: blue; }

And combine the rules if you want both. Hope that helps.

edited Aug 16 '13 at 18:23

answered Aug 16 '13 at 18:16

Steven Kohus

144
3

I checked it a couple of times but only the second one works. THe first line doesn't effect the view of the box. Which I try to change the bg-color if selected... – Stefan Weiss Aug 16 '13 at 18:35
Sorry I tested it in IE and it works fine. It appears to not work for changing the background color in FF for the radio button itself. It appears none of the suggested answers will work in FF. You may need to use images instead for the radio buttons. – Steven Kohus Aug 16 '13 at 18:54
Here is a JSFiddle demo that you can try in IE and FF: http://jsfiddle.net/ADrhs/ – Steven Kohus Aug 16 '13 at 18:57

Leo T Abraham · Answer 3 · 2013-08-16T18:25:25.180

1

input:checked
{
    background:#ff0000;
}

There is no class called select. This style is supported only by Opera.

edited Aug 16 '13 at 18:25

answered Aug 16 '13 at 18:15

Leo T Abraham

2,407
4
28
54

Change background color of "selected" with CSS

3 Answers3