Make text of (some) labels blue when clicked on

**W8 4me** · 02-28-2012, 07:00 AM

Hi all,

I'm trying to find the best way to change (some) of my label's text to the colour blue when the associated radio button is checked.

However, when another radio button is checked within the same category, the other label's text (within that same category) should go back to the page's standard text colour.

I am restricted because I need to make this work in IE7, therefore the CSS :focus selector doesn't work.

So far I've tried this (the two categories are: Type of vehicle, Type of fuel), but it's not working:

Code:

<script type="text/javascript">
function blueme() {
this.style.color='blue';
}
</script>

...

<label>Type of vehicle:</label>
<label onfocus="blueme()"><input type="radio" name="vehicle" value="Car" /> Car</label> 
<label onfocus="blueme()"><input type="radio" name="vehicle" value="Motorcycle" /> Motorcycle</label> 
<label onfocus="blueme()"><input type="radio" name="vehicle" value="Bicycle" /> Bicycle</label>

<p></p>

<label>Type of fuel:</label>
<label onfocus="blueme()"><input type="radio" name="fuel" value="Petrol" /> Petrol</label> 
<label onfocus="blueme()"><input type="radio" name="fuel" value="Diesel" /> Diesel</label> 
<label onfocus="blueme()"><input type="radio" name="fuel" value="Cabbage" /> Cabbage</label>

thanks guys

**vwphillips** · 02-28-2012, 07:42 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
function blueme(lable) {
 var frm=lable.form,ip=lable.getElementsByTagName('INPUT')[0],rads,z0=0;
 if (ip){
  rads=frm[ip.name];
  for (;z0<rads.length;z0++){
   rads[z0].parentNode.style.color=rads[z0]==ip?'blue':'black';
  }
 }
}
</script>
</head>

<body>
<form>
<label>Type of vehicle:</label>
<label onmouseup="blueme(this)"><input type="radio" name="vehicle" value="Car"  /> Car</label>
<label onmouseup="blueme(this)"><input type="radio" name="vehicle" value="Motorcycle" /> Motorcycle</label>
<label onmouseup="blueme(this)"><input type="radio" name="vehicle" value="Bicycle" /> Bicycle</label>

<p></p>

<label>Type of fuel:</label>
<label onmouseup="blueme(this)"><input type="radio" name="fuel" value="Petrol" /> Petrol</label>
<label onmouseup="blueme(this)"><input type="radio" name="fuel" value="Diesel" /> Diesel</label>
<label onmouseup="blueme(this)"><input type="radio" name="fuel" value="Cabbage" /> Cabbage</label>
</form>

</body>

</html>

**joyee** · 11-17-2012, 11:38 AM

"So far I've tried this (the two categories are: Type of vehicle, Type of fuel), but it's not working"

Also desperate to know how to fix this problem.

**W8 4me** · 11-18-2012, 11:51 AM

Originally Posted by joyee

"So far I've tried this (the two categories are: Type of vehicle, Type of fuel), but it's not working"

Also desperate to know how to fix this problem.

Code:

function blueme(lable) {
 var frm=lable.form,ip=lable.getElementsByTagName('INPUT')[0],rads,z0=0;
 if (ip){
  rads=frm[ip.name];
  for (;z0<rads.length;z0++){
   rads[z0].parentNode.style.color=rads[z0]==ip?'blue':'black';
  }
 }
}

then...

Code:

<label onmouseup="blueme(this)">
<input type="radio" name="TypeOfVehicle" value="Car" /> Car
</label> 
<label onmouseup="blueme(this)">
<input type="radio" name="TypeOfVehicle" value="Motorcycle" /> Motorcycle</label>
</label>

...

<label onmouseup="blueme(this)">
<input type="radio" name="TypeOfFuel" value="Petrol" /> Petrol
</label> 
<label onmouseup="blueme(this)">
<input type="radio" name="TypeOfFuel" value="Diesel" /> Diesel
</label>

Thread: Make text of (some) labels blue when clicked on

Thread Tools

Display

Make text of (some) labels blue when clicked on

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions