3

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;
}

1 Answer 1

3

Solved

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.