Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

Radio Buttons

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

Moderators: macek, egami, gesf

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

Can't

Postby andrewdavey » Wed Apr 09, 2003 2:53 am

No sorry. Same goes for list boxes and combo boxes unfortunately. :evil:
andrewdavey
New php-forum User
New php-forum User
 
Posts: 16
Joined: Wed Feb 12, 2003 5:27 am
Location: Cornwall, England

Thanks

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

Thanks
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

Re: Radio Buttons

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

but you may change <INPUT.... tag
User avatar
WiZARD
Moderator
Moderator
 
Posts: 1257
Joined: Thu Jun 20, 2002 10:14 pm
Location: Ukraine, Crimea, Simferopol

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
CHUBBYCAT
New php-forum User
New php-forum User
 
Posts: 53
Joined: Mon Jun 21, 2004 7:08 am

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
Redcircle
Moderator
Moderator
 
Posts: 830
Joined: Tue Jan 21, 2003 10:42 pm
Location: Michigan USA

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

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
WiZARD
Moderator
Moderator
 
Posts: 1257
Joined: Thu Jun 20, 2002 10:14 pm
Location: Ukraine, Crimea, Simferopol

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? =))))
Oleg Butuzov
Last Samuray
Last Samuray
 
Posts: 831
Joined: Sun Jun 02, 2002 3:09 am

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
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

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

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
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

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

meniat stil radiobuttonov - cssom hui chto sdelaesh prilichnogo...
Oleg Butuzov
Last Samuray
Last Samuray
 
Posts: 831
Joined: Sun Jun 02, 2002 3:09 am

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

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

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>
User avatar
Alexej Kubarev
Site Admin
Site Admin
 
Posts: 2223
Joined: Fri Mar 05, 2004 7:15 am
Location: Täby, Stockholms län

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>
adumpaul
New php-forum User
New php-forum User
 
Posts: 3
Joined: Fri Nov 18, 2011 4:07 am


Return to CSS

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron