Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Change Style of Selected Radio Button Label

    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
    Code:
    <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
    Code:
    @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;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Added ID to the Labels, onclick to the buttons, and a simple js script:
    Code:
    <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>first<br/>
                <input type="radio" name="color" id="8dc63f" value="8dc63f" checked />
                </div>
                <div style="float: left">
                <label id="00aeef_label" for="00aeef" style="width: 55px;height:55px;background-color:#00aeef;border:2px solid #000;margin-left:20px;">second</label><br/>
                <input type="radio" name="color" id="00aeef" value="00aeef" onclick="change(this.value);" />
                </div>
                <div style="float: left">
                <label id="ed1c24_label" for="ed1c24" style="width: 55px;height:55px;background-color:#ed1c24;border:2px solid #000;margin-left:20px;">third</label><br/>
                <input type="radio" name="color" id="ed1c24" value="ed1c24" onclick="change(this.value);" />
                </div>
                <div style="float: left">
                <label id="f15a29_label" for="f15a29" style="width: 55px;height:55px;background-color:#f15a29;border:2px solid #000;margin-left:20px;">words</label><br/>
                <input type="radio" name="color" id="f15a29" value="f15a29" onclick="change(this.value);" />
                </div>
        </div>
        <div class="clear"></div>
        <input type="submit" value="Preview" />
    </div>
    </form>
    
    <script type="text/javascript">
    function change(ident)	{
    	document.getElementById("00aeef_label").style.border = "2px solid black";
    	document.getElementById("ed1c24_label").style.border = "2px solid black";
    	document.getElementById("f15a29_label").style.border = "2px solid black";
    	document.getElementById(ident+"_label").style.border = "2px solid red";
    }
    </script>

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Location
    USA
    Posts
    314
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Surely it must be possible to do this without JS?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •