Radio button that looks like a button?

M

Martin

Is there any way I can make a radio button look like an actual button
instead of the standard little round circle? I would like to have an
array of 5 buttons such that when one is pressed "in", the others are
all "out". IOW, like actual old-fashioned radio buttons.
 
B

Beauregard T. Shagnasty

Martin said:
Is there any way I can make a radio button look like an actual button
instead of the standard little round circle? I would like to have an
array of 5 buttons such that when one is pressed "in", the others are
all "out". IOW, like actual old-fashioned radio buttons.

I guess you want something like these?
http://img.zdnet.com/techDirectory/RADIO.GIF

I spent several minutes googling but didn't turn up any individual
On/Off button graphics. If you are good with a graphic editor, perhaps
you can create your own two graphics, or even crop out parts of the
RADIO.GIF above.

Then, of course, you need some sort of code to switch between one or the
other when they are clicked. To me, it feels like too much effort for
the resultant effect, as people are used to seeing the "standard little
round circle" ...
 
J

Jukka K. Korpela

Martin said:
Is there any way I can make a radio button look like an actual button
instead of the standard little round circle? I would like to have an
array of 5 buttons such that when one is pressed "in", the others are
all "out". IOW, like actual old-fashioned radio buttons.

That's a very bad idea. Consistency is the key design principle you should
have especially when designing interactive elements such as forms. For an
old and very sound argument in favor of this, check item #3 at
http://www.useit.com/alertbox/990530.html

Now, assuming you want to create a nasty effect for the "amusement" of some
friends or when volunteering to "redesign" (= ruin) your competitor's web
site, there would be two basic approaches:
1) Use style sheets to modify the apperance of <input type="radio" ...>
elements. This appears to be tricky, if not impossible, at the current level
of CSS specifications and implementations.
2) Use other elements, such as <input type="image" ...> or
<button>...</button>, to create the visual effect and JavaScript to make
them behave like radio buttons (when JavaScript is enabled).

Should you like to make the page functional when JavaScript is off, you
could use approach #2 modified so that in HTML markup, the elements are
<input type="radio" ...> and JavaScript code then changes them to other
elements.
 
J

Jan C. Faerber

Well, I would never have guessed that they were radio buttons.

Yes - they look crap now.
You have to change them to some nice photoshop cristal buttons or even
animated gifs with streams of light etc...
That is just to demonstrate the idea. :D
 
M

Martin

Is there any way I can make a radio button look like an actual button
instead of the standard little round circle? I would like to have an
array of 5 buttons such that when one is pressed "in", the others are
all "out". IOW, like actual old-fashioned radio buttons.


Thanks to all. I thought maybe it was just a matter of specifying a
parameter - I didn't realize it was such a big deal. I'll probably
just stick with the "little round circles". (but I have saved that one
example - it might come in handy some time).
 
J

Jan C. Faerber

Yes - they look crap now.
You have to change them to some nice photoshop cristal buttons or even
animated gifs with streams of light etc...
That is just to demonstrate the idea. :D

http://www.lovedieu.eu/alt.html/radioround.html

I got it done better now with single button pics.
hm... only... you can not change the big buttons by simply
clicking the small radio standard buttons in my form.
Maybe there is a workaround - but in the form you
can not unselect a radio button by clicking on it by default.
Here you can click on the big button pics again and unselect
them.
It depends on what you want.
 
J

Jan C. Faerber

Thanks to all. I thought maybe it was just a matter of specifying a
parameter - I didn't realize it was such a big deal. I'll probably
just stick with the "little round circles". (but I have saved that one
example - it might come in handy some time).

Right, if you use only three buttons you probably become a great
trumpet player - like Miles Davis (o;
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,832
Latest member
GlennSmall

Latest Threads

Top