我如何使用 :checked 单选按钮
How do I use :checked on radio buttons
如何将 :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; … }
是不是我页面设置的问题?我隐藏了输入单选按钮并用图像替换它们。
感谢您的帮助。
干杯,
阿米尔
问题是您无法定位替换了单选按钮的图像或标签。
您可以:
1) 在单选按钮 click/change
上使用 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">
20 Bolas Fio de 3m
</label>
CSS:
.hideradio-vars input[type="radio"]:checked + img {
/* Your rules here */
}
遗憾的是,您无法使用 CSS 定位父级,因此您可能需要查看 JS/jQuery 或完全修改 HTML 标记。
如何将 :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; … }
是不是我页面设置的问题?我隐藏了输入单选按钮并用图像替换它们。
感谢您的帮助。 干杯, 阿米尔
问题是您无法定位替换了单选按钮的图像或标签。
您可以:
1) 在单选按钮 click/change
上使用 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">
20 Bolas Fio de 3m
</label>
CSS:
.hideradio-vars input[type="radio"]:checked + img {
/* Your rules here */
}
遗憾的是,您无法使用 CSS 定位父级,因此您可能需要查看 JS/jQuery 或完全修改 HTML 标记。