Radio Buttons

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

Moderators: macek, egami, gesf

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:

Radio Buttons

Postby digitalgravy » 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 :)

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

Can't

Postby andrewdavey » 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:

Thanks

Postby digitalgravy » Wed Apr 09, 2003 4:34 am

Thanks

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

Re: Radio Buttons

Postby WiZARD » Wed Apr 09, 2003 6:57 am

but you may change <INPUT.... tag

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

Postby CHUBBYCAT » 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: 830
Joined: Tue Jan 21, 2003 10:42 pm
Location: Michigan USA
Contact:

Postby Redcircle » 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.

User avatar
Oleg Butuzov
Last Samuray
Last Samuray
Posts: 831
Joined: Sun Jun 02, 2002 3:09 am

Postby Oleg Butuzov » 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: 1257
Joined: Thu Jun 20, 2002 10:14 pm
Location: Ukraine, Crimea, Simferopol
Contact:

Postby WiZARD » 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.....

User avatar
Oleg Butuzov
Last Samuray
Last Samuray
Posts: 831
Joined: Sun Jun 02, 2002 3:09 am

Postby Oleg Butuzov » 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: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Postby Alexej Kubarev » 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..

User avatar
Oleg Butuzov
Last Samuray
Last Samuray
Posts: 831
Joined: Sun Jun 02, 2002 3:09 am

Postby Oleg Butuzov » 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: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län
Contact:

Postby Alexej Kubarev » Wed Jan 12, 2005 4:12 pm

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

User avatar
Oleg Butuzov
Last Samuray
Last Samuray
Posts: 831
Joined: Sun Jun 02, 2002 3:09 am

Postby Oleg Butuzov » Wed Jan 12, 2005 4:18 pm

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

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

Postby Alexej Kubarev » Thu Jan 13, 2005 1:45 am

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

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

Postby Alexej Kubarev » 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 :)

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

Postby Alexej Kubarev » 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>

adumpaul
New php-forum User
New php-forum User
Posts: 3
Joined: Fri Nov 18, 2011 4:07 am

Re: Radio Buttons

Postby adumpaul » Sat Nov 19, 2011 1:34 am

<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>


Return to “CSS”

Who is online

Users browsing this forum: No registered users and 2 guests

cron