问题描述
我正在尝试在表单中选择单选按钮标签时更改其边框颜色.我发现了这个问题,几乎正是我要执行的操作:,但是当我尝试使用自己的代码对其进行选择时,颜色不会发生变化.这让我发疯,我不知道为什么它不应用边框颜色-非常感谢您的帮助.我已经在这里上传了要使用的代码: http://jsfiddle.net/SHfr5/但我也将在下面包含它.
I'm attempting to change the border color of a radio button label when it is selected in the form. I found this question which is pretty much exactly what I am looking to do: CSS - How to Style a Selected Radio Buttons Label? but when I try it with my own code the color doesn't change on select. This is driving me nuts, I can't figure out why it won't apply the border color - any help is very much appreciated. I have uploaded the code I am working with here: http://jsfiddle.net/SHfr5/ but I will also include it below.
HTML
<form name="input" action="/engine/preview.php" enctype="multipart/form-data" id="customizeForm" method="post">
<div id="customize_container">
<h1>Customize</h1>
<div id="customize_left">
<div style="float: left">
<label for="8dc63f" style="width: 55px;height:55px;background-color:#8dc63f;margin-left:20px;"></label><br/>
<input type="radio" name="color" id="8dc63f" value="8dc63f" checked />
</div>
<div style="float: left">
<label for="00aeef" style="width: 55px;height:55px;background-color:#00aeef;border:2px solid #000;margin-left:20px;"></label><br/>
<input type="radio" name="color" id="00aeef" value="00aeef" />
</div>
<div style="float: left">
<label for="ed1c24" style="width: 55px;height:55px;background-color:#ed1c24;border:2px solid #000;margin-left:20px;"></label><br/>
<input type="radio" name="color" id="ed1c24" value="ed1c24" />
</div>
<div style="float: left">
<label for="f15a29" style="width: 55px;height:55px;background-color:#f15a29;border:2px solid #000;margin-left:20px;"></label><br/>
<input type="radio" name="color" id="f15a29" value="f15a29" />
</div>
</div>
<div class="clear"></div>
<input type="submit" value="Preview" />
</div>
CSS
@charset "utf-8";
.clear {
clear: both;
}
#customize_container {
width: 840px;
clear: both;
}
#customize_left {
width: 385px;
float: left;
margin-top: 35px;
}
#customizeForm input[type=radio] {
margin: 5px 0px 40px 43px;
}
#customizeForm label {
display:inline-block;
border:2px solid #000;
}
#customizeForm input[type=radio]:checked + label {
border: 2px solid #FFF!important;
}
推荐答案
已解决
发生此问题是因为使用了+ CSS选择器. 相邻"选择器将仅选择紧接在前一个元素之后的元素.在这种情况下,标签前直接带有一个选中的单选按钮.我的原始HTML在输入之前带有标签,为了使用+选择器,标签必须在输入之后.
The issue occurred because of the use of the + CSS selector. The 'adjacent' selector will select only the element that is immediately preceded by the former element. In this case the label directly preceded by a checked radio button. My original HTML had the label before the input, in order to use the + selector the label must be after the input.
这篇关于更改所选单选按钮标签的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!