More obvious Radio button? 2

Will192 · Jul 8, 2003

What I need is a radio button that is more obvious when it is selected. Is there a way that I can make the button part bigger? Is there a way that I can change the color of the text if the radio button is selected?

Thanks in advance for any responses to this post.

Will192

onpnt · Jul 8, 2003

there is no way to make the actual button larger but you can make the bgcolor change and any text associate on the page to the effect after the click event occurs
eg:
<tr>
<td>
<input type="radio" onClick="this.style.backgroundColor='red'">Click Me!
</td>
</tr>

____________________________________________________
_{The most important part of your thread is the subject line.

Make it clear and about the topic so we can find it later for reference. Please!! faq333-3811}

http://www.onpntwebdesigns.com

onpnt · Jul 8, 2003

BTW
that was jsut a example. A poor one too. if you have a event like the onClick in the button then you need to set the event to select the button as that will not occur if you do not.
eg:
<input type="radio" onClick="this.style.backgroundColor='red';this.checked=true">Click Me!

____________________________________________________
_{The most important part of your thread is the subject line.

Make it clear and about the topic so we can find it later for reference. Please!! faq333-3811}

http://www.onpntwebdesigns.com

grtfercho · Jul 8, 2003

Using IE 5.5 and Nestcape 6.0.in a Windows 2000 PC. I get two different results but surely the look of the radio has been changed.

<input type="radio" name="bigbluebutton" style="background-color:blue;border:thin solid black;width:65px;height:65px">

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

Will192 · Jul 8, 2003

Thanks for the replies. I got that working, but when I select another radio button in the set, the color stays. How do I set it up so that the color changes back when another radio button in the set is clicked?

onpnt · Jul 8, 2003

you'll need to loop through the group and get which is selected and such.
example:

http://www.faqts.com/knowledge_base/view.phtml/aid/2015/fid/311

____________________________________________________
_{The most important part of your thread is the subject line.

Make it clear and about the topic so we can find it later for reference. Please!! faq333-3811}

http://www.onpntwebdesigns.com

grtfercho · Jul 8, 2003

I got to cook this small script.

All this is based on the <label> tag and a strict identification method.
You have to Id your radio boxes as a concatenation between the name of the group and the value of the radio box.
The ID of each label is the prefix 'lbl' plus the ID of the particular radio box.

As an added bonus when using the <label> tag you can click on the string and you'll select the option as well (kinda how VB lets you build forms).

_________________________________
<head>
<script type="text/javascript">

function showselect(elem){

var thegroup=eval('document.'+elem.form.name+'.'+elem.name);
var txtElem;//holds a string with the full id of the label
var thelabel; // holds the actual <label>
for(var index=0;index<thegroup.length;index++){
txtElem='lbl'+thegroup[index].id;
thelabel=document.getElementById(txtElem);
thelabel.className='radionormal';
}

//once all of them are reset then change the currently selected
txtElem='lbl'+elem.id;
thelabel=document.getElementById(txtElem);
thelabel.className='radioselected';

}
</script>
<style>
.radionormal{
background-color:transparent;
border:thin black none;
font-weight:normal;
color:black;

}
.radioselected{
background-color:red;
border:thin black solid;
font-weight:bolder;
color:white;

}

</style>
</head>
<body>

<form name="anyname">

<label for="radioset1" id="lblradioset1" class="radionormal">
<input type="radio" name="radioset" value="1" id="radioset1" onclick="showselect(this);"> American Dollars</label>
<br>
<label for="radioset2" id="lblradioset2" class="radionormal">
<input type="radio" name="radioset" value="2" id="radioset2" onclick="showselect(this);"> Canadian Dollars</label>
<br>
<label for="radioset3" id="lblradioset3" class="radionormal">
<input type="radio" name="radioset" value="3" id="radioset3" onclick="showselect(this);"> UK Pounds</label>
<br>
<label for="radioset4" id="lblradioset4" class="radionormal">
<input type="radio" name="radioset" value="4" id="radioset4" onclick="showselect(this);"> Yens</label>
<br>

</form>

</body>

grtfercho çB^]\..
"Imagination is more important than Knowledge" A. Einstein

Will192 · Jul 8, 2003

I have gotten it to work through onpnt's link. My problem now is that I can't set the backgroud color initally. I have tried calling the procedure on the ONLOAD event of the form or the radio buttons, but the radio buttons aren't defined yet at that point.

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!

More obvious Radio button? 2

Will192

Technical User

onpnt

Programmer

onpnt

Programmer

grtfercho

Programmer

Will192

Technical User

onpnt

Programmer

grtfercho

Programmer

Will192

Technical User

Similar threads

Part and Inventory Search

Sponsor