更改选定单选按钮标签的样式答案

【问题标题】：Change Style of Selected Radio Button Label更改选定单选按钮标签的样式
【发布时间】：2013-01-13 14:32:05
【问题描述】：

我试图在表单中选择单选按钮标签时更改它的边框颜色。我发现这个问题几乎正是我想要做的：CSS - How to Style a Selected Radio Buttons Label? 但是当我用我自己的代码尝试它时，颜色在选择时不会改变。这让我发疯，我无法弄清楚为什么它不会应用边框颜色 - 非常感谢任何帮助。我已在此处上传了我正在使用的代码：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;
}

【问题讨论】：

标签： css radio-button label

【解决方案1】：

已解决

由于使用了 + CSS 选择器而出现此问题。 'adjacent' 选择器将只选择紧接在前一个元素之前的元素。在这种情况下，标签前面直接有一个选中的单选按钮。我的原始 HTML 在输入之前有标签，为了使用 + 选择器，标签必须在输入之后。

【讨论】：