使用CSS更改“selected”的背景颜色

时间:2013-08-16 18:10:10

标签: css css3

我正在尝试更改所选项目的背景颜色,但无法使其正常工作。

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>

我试过这个,但它不起作用:

CSS:

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

3 个答案:

答案 0 :(得分:3)

你的语法有点不对(假设你有一个.select类,因为它不在你的HTML中):

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

For further reading on :checked selector

答案 1 :(得分:2)

如果您想选择无线电元素本身,可以使用:

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

如果您想选择无线电元素旁边的元素文本的背景,那么您可以使用它:

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

如果你想要两者,并结合规则。希望有所帮助。

答案 2 :(得分:1)

input:checked
{
    background:#ff0000;
} 

没有名为select的类。这种风格仅由Opera支持。