Radio Buttons

[digitalgravy]

Hello,
I wanted to know of there was a way to customize your radio buttons. I havent been able to find a way anywhere. I want to be able to have just a simple "O" (with no inner bevel) instead of the default radio buttons that the browser displays.
I have some customized forms using css and I have made the text boxes and the buttons (i.e. submit, reset etc.) with a 1 px border. I want to know how to have the same effect for:
Radio Buttons, Checkboxes and drop menus.

Any Help would be appreciated.

Thanks

[andrewdavey]

No sorry. Same goes for list boxes and combo boxes unfortunately. :evil:

[digitalgravy]

Thanks

[WiZARD]

but you may change <INPUT.... tag

[CHUBBYCAT]

actually I think you could do something like

Code: Select all

 form, radio { whatever things you want }

ou could put

background-image: (url/----.gif);
background-color: #------;

or other stuff you want

[Redcircle]

You could do it but it involves Javascript, Hidden form tags and images.. they really aren't buttons but images that look like your custom buttons.

[Oleg Butuzov]

i have a solution about costum look of radio and check box - it is a shareware java script

[WiZARD]

i have a solution about costum look of radio and check box - it is a shareware java script

I see form at the http://www.apple.com but don't remember where exactly.....

[Oleg Butuzov]

i have a solution about costum look of radio and check box - it is a shareware java script

I see form at the http://www.apple.com but don't remember where exactly.....

You propose to explore all site, Ihor?
will you pay for my trafic? =))))

[Alexei Kubarev]

It took me quite a while to look through the site... found lots of forms but all of them were standard forms... so i dont really thing thats gonna help..

[Oleg Butuzov]

i have a js that do it, but its a paid script so i cant post it here.

its changing a radion buttons and checkboxes.

[Alexei Kubarev]

Oleg..sluhaj..a v kratse objasni ce trebuetsa voobshe :S
A to oni mena zaputali uze...

[Oleg Butuzov]

meniat stil radiobuttonov - cssom hui chto sdelaesh prilichnogo...

[Alexei Kubarev]

okej..hmmz... cestno govora ja slabo predstavlaju kak eto sdelat v JS... ja ne super s JS

[Alexei Kubarev]

Code: Select all

<form name="myForm">
<input type="hidden" name="mycheckbox" value="0">
<a href="#" onClick="gfxCheckboxToggle(document.myForm.mycheckbox,document['checkbox1'],'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="checkbox1"></a>
</form>
<script type="text/javascript">


function gfxCheckboxToggle(checkboxobj,imgobj,offSrc,onSrc){
   checkboxobj.value = (checkboxobj.value=='1') ? '0':'1';
   if(document.images){
      imgobj.src = (checkboxobj.value=='1') ? onSrc:offSrc;
   }
}
</script>


That one is for a checkbox... you can change it to work like a radio button

[Alexei Kubarev]

Or i just made a complete solution for you:

Code: Select all

<form name="myForm">
<input type="hidden" name="myradio">
<a href="#" onClick="gfxRadioSelect('myRadios',document.myForm.myradio,0,'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="myRadios0"></a>
<a href="#" onClick="gfxRadioSelect('myRadios',document.myForm.myradio,1,'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="myRadios1"></a>
<a href="#" onClick="gfxRadioSelect('myRadios',document.myForm.myradio,2,'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="myRadios2"></a>
</form>
<script type="text/javascript">

var myRadios=new Array('blå','gul','vit'); // Array med de värden som skall ingå i den grafiska radioknappsgruppen.

function gfxRadioSelect(radioarray,radioobj,index,offSrc,onSrc){
   for(var n=0;n<eval(radioarray+".length");n++){
      eval('document["'+radioarray+n+'"].src=offSrc;');
   }
   radioobj.value=eval(radioarray+"["+index+"]");
   eval('document["'+radioarray+index+'"].src=onSrc;');
}
</script>


[adumpaul]

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices.
HTML code:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>