如何使用：选中单选按钮答案

【问题标题】：How do I use :checked on radio buttons如何使用：选中单选按钮
【发布时间】：2015-08-18 02:36:17
【问题描述】：

如何为带有隐藏输入按钮的单选按钮使用 :checked css？ http://cormilu.com.br/loja/sem-categoria/test-2/

我试过了：

input[type=”radio”]:checked{ color:red; … }
input[type="radio"]:checked+label{ color:red; …  } 
label > input + img{ color:red; … }
label > input:checked + img{color:red; … }

是因为我的页面设置吗？隐藏输入单选按钮并用图像替换它们。

感谢您的帮助。干杯，阿米尔

【问题讨论】：

您的选择器似乎没问题，但显然img{color:red;} 没有做任何事情，我想知道您是否要更改图像旁边文本的颜色？ - jsfiddle.net/8ebrycqx

标签： css wordpress radio-button checked

【解决方案1】：

问题是您无法定位已替换单选按钮的图像或标签。

您可以：

1) 在单选按钮单击/更改时使用 JavaScript 更改内容（以 parentNode 为目标）

2) 如果可以解决您的问题，请更改 HTML 标记，然后应用 CSS：

将<img> 标签移到<input> 之后并使用CSS 兄弟选择器(+)：

HTML：

<label class="hideradio-vars">
    <input type="radio" value="20-bolas-fio-de-3m" id="pa_kit" name="attribute_pa_kit">
    <img src="http://cormilu.com.br/cormilu-content/uploads/2015/04/free1.png">
    &nbsp; &nbsp; 20 Bolas Fio de 3m
</label>

CSS：

.hideradio-vars input[type="radio"]:checked + img {
    /* Your rules here */
}

很遗憾，您无法使用 CSS 定位父级，因此您可能需要研究 JS/jQuery 或完全修改您的 HTML 标记。

【讨论】：

嗨，欧文，感谢您的提醒！很高兴知道存在潜在的 html 问题。我更改了 HTML 顺序，现在我可以用 :checked 标记 img。有了这个新设置，我怎样才能让文本也改变颜色？感谢您的帮助！
您必须将文本包装在中，然后通过input:checked + img + span 定位它们，这开始变得非常丑陋。但它有效。