css - 使用 CSS 更改“选定”的背景颜色

Question

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

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;
}

Answer 1

您的语法有点错误（假设您确实有一个 .select 类，因为它不在您的 HTML 中）：

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

进一步阅读 :checked 选择器

Answer 2

如果要选择单选元素本身，可以使用：

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

如果您希望选择 radio 元素旁边的元素文本的背景，则可以使用以下命令：

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

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

Answer 3

input:checked
{
    background:#ff0000;
} 

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