Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-01-2013, 08:24 PM   PM User | #1
Riboflavin
Regular Coder

 
Join Date: Sep 2004
Location: USA
Posts: 312
Thanks: 7
Thanked 0 Times in 0 Posts
Riboflavin is an unknown quantity at this point
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;
}
Riboflavin is offline   Reply With Quote
Old 02-02-2013, 02:54 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,395
Thanks: 18
Thanked 351 Times in 350 Posts
sunfighter is on a distinguished road
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>
sunfighter is offline   Reply With Quote
Old 02-08-2013, 07:35 PM   PM User | #3
Riboflavin
Regular Coder

 
Join Date: Sep 2004
Location: USA
Posts: 312
Thanks: 7
Thanked 0 Times in 0 Posts
Riboflavin is an unknown quantity at this point
Surely it must be possible to do this without JS?
Riboflavin is offline   Reply With Quote
Reply

Bookmarks

Tags
css, html, label, radio button

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:59 AM.


Advertisement
Log in to turn off these ads.