Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
colors
- Thread starter killerg
- Start date
![[monkey]](/data/assets/smilies/monkey.gif "[monkey] [monkey]")
![[snake]](/data/assets/smilies/snake.gif "[snake] [snake]")
<.Filling in the white center of the radio button is not possible with javascript or css.
-kaht
Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
-kaht
Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
- Thread starter
- #4
dwarfthrower
Programmer
Here's how I'd tackle it. The text off to the side of your radio buttons is not a property of the radio button. So unless you set up your HTML so that each radio button and it's associated text are enclosed by a readily obtainable element, you won't be able to get at it.
Solution:
Wrap the buttons and their text in some DIV tags so that each radio button and the text you want to change are enclosed by one DIV tag. And all of those tags are enclosed by another tag.
Play with this one if you like:
Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Enable Apps
Solution:
Wrap the buttons and their text in some DIV tags so that each radio button and the text you want to change are enclosed by one DIV tag. And all of those tags are enclosed by another tag.
Play with this one if you like:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colour Demo</title>
<script type="text/javascript" language="javascript">
function toggleColour(objRadio){
var baseColour = "#000000";
var selectedColour = objRadio.value;
var parentElement = (objRadio.parentElement == null ? objRadio.parentNode : objRadio.parentElement);
var topElement = (parentElement.parentElement == null ? parentElement.parentNode : parentElement.parentElement);
var allElements = topElement.getElementsByTagName("div");
//Loop through all of the radio containing elements
for(var i = 0; i < allElements.length; i++){
//And set them to black.
allElements.item(i).style.color = baseColour;
}
//Then set the one that contains this radio to it's chosen colour
parentElement.style.color = selectedColour;
}
</script>
</head>
<body>
<div>
<div><input type="radio" value="#FF0000" name="colourSelection" onclick="toggleColour(this);" />Red</div>
<div><input type="radio" value="#00FF00" name="colourSelection" onclick="toggleColour(this);" />Green</div>
<div><input type="radio" value="#0000FF" name="colourSelection" onclick="toggleColour(this);" />Blue</div>
</div>
</body>
</html>Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Enable Apps
- Status
Similar threads