Radio Buttons

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: egami, macek, gesf

Post Reply
User avatar
digitalgravy
New php-forum User
New php-forum User
Posts: 32
Joined: Sat Feb 15, 2003 10:00 pm
Location: Los Angeles, CA
Contact:

Tue Apr 08, 2003 6:47 am

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 :)
-DigitalGravy
 got gravy?
 http://www.digitalgravy.net

andrewdavey
New php-forum User
New php-forum User
Posts: 16
Joined: Wed Feb 12, 2003 5:27 am
Location: Cornwall, England

Wed Apr 09, 2003 2:53 am

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

User avatar
digitalgravy
New php-forum User
New php-forum User
Posts: 32
Joined: Sat Feb 15, 2003 10:00 pm
Location: Los Angeles, CA
Contact:

Wed Apr 09, 2003 4:34 am

Thanks
-DigitalGravy
 got gravy?
 http://www.digitalgravy.net

User avatar
WiZARD
Moderator
Moderator
Posts: 1240
Joined: Thu Jun 20, 2002 10:14 pm
Location: Ukraine, Crimea, Simferopol
Contact:

Wed Apr 09, 2003 6:57 am

but you may change <INPUT.... tag
"Sex,Drugs and Rock&Roll " replaced at "Sucks,Bugs and Plug&Play";
Image

User avatar
CHUBBYCAT
New php-forum User
New php-forum User
Posts: 53
Joined: Mon Jun 21, 2004 7:08 am
Contact:

Fri Dec 31, 2004 8:21 am

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

User avatar
Redcircle
Moderator
Moderator
Posts: 826
Joined: Tue Jan 21, 2003 10:42 pm
Location: Michigan USA
Contact:

Sun Jan 02, 2005 6:33 am

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
Last Samuray
Last Samuray
Posts: 824
Joined: Sun Jun 02, 2002 3:09 am

Sun Jan 02, 2005 8:07 am

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

User avatar
WiZARD
Moderator
Moderator
Posts: 1240
Joined: Thu Jun 20, 2002 10:14 pm
Location: Ukraine, Crimea, Simferopol
Contact:

Wed Jan 12, 2005 10:04 am

OlegButuzov wrote: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.....
"Sex,Drugs and Rock&Roll " replaced at "Sucks,Bugs and Plug&Play";
Image

Oleg Butuzov
Last Samuray
Last Samuray
Posts: 824
Joined: Sun Jun 02, 2002 3:09 am

Wed Jan 12, 2005 12:27 pm

WiZARD wrote:
OlegButuzov wrote: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? =))))

User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2214
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Wed Jan 12, 2005 12:59 pm

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..
Best Regards,
Alexej Kubarev
-------------------------------
Zend Certified Engineer
Image Image

Oleg Butuzov
Last Samuray
Last Samuray
Posts: 824
Joined: Sun Jun 02, 2002 3:09 am

Wed Jan 12, 2005 2:49 pm

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.

User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2214
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Wed Jan 12, 2005 4:12 pm

Oleg..sluhaj..a v kratse objasni ce trebuetsa voobshe :S
A to oni mena zaputali uze...
Best Regards,
Alexej Kubarev
-------------------------------
Zend Certified Engineer
Image Image

Oleg Butuzov
Last Samuray
Last Samuray
Posts: 824
Joined: Sun Jun 02, 2002 3:09 am

Wed Jan 12, 2005 4:18 pm

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

User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2214
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Thu Jan 13, 2005 1:45 am

okej..hmmz... cestno govora ja slabo predstavlaju kak eto sdelat v JS... ja ne super s JS :(
Best Regards,
Alexej Kubarev
-------------------------------
Zend Certified Engineer
Image Image

User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2214
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Mon Jan 31, 2005 5:30 am

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 :)
Best Regards,
Alexej Kubarev
-------------------------------
Zend Certified Engineer
Image Image

User avatar
Alexej Kubarev
Site Admin
Site Admin
Posts: 2214
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Mon Jan 31, 2005 5:31 am

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>
Best Regards,
Alexej Kubarev
-------------------------------
Zend Certified Engineer
Image Image

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 0 guests