我试图在表单中选择单选按钮标签时更改其边框颜色。我发现这个问题几乎正是我想要做的:CSS - 如何设置选定单选按钮标签的样式? https://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label但是当我用自己的代码尝试时,选择的颜色不会改变。这让我抓狂,我不明白为什么它不应用边框颜色 - 非常感谢任何帮助。我已经在这里上传了我正在使用的代码:http://jsfiddle.net/SHfr5/ http://jsfiddle.net/SHfr5/但我也会将其包含在下面。
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;
}
Solved
该问题是由于使用 + CSS 选择器而发生的。 “相邻”选择器将仅选择前一个元素紧邻的元素。在这种情况下,标签前面有一个选中的单选按钮。我原来的 HTML 在输入之前有标签,为了使用 + 选择器,标签必须在输入之后。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)