0

I want to have a radio button input but instead of mere circles I would prefer another html element (including structure) to illustrate the choices. I thought this might work with the appearance style, but it does not work (probably because the input[radio] might not contain other elements.

Is there any way of styling an input radio, so it displays another HTMLElement instead of its circle?

abergmeier
  • 13,224
  • 13
  • 64
  • 120
  • Possible duplicate: http://stackoverflow.com/questions/5112995/is-there-an-easy-way-to-replace-radio-button-with-images-and-a-colored-border-f – Billy Moat Nov 21 '12 at 15:06

3 Answers3

2

Why not just leave them radio buttons but make the entire image clickable with label tags?

fwho
  • 248
  • 2
  • 14
  • I am going for this. Using this answer it already looks great: http://stackoverflow.com/questions/4388102/can-you-style-an-active-form-inputs-label-with-just-css. Now I only have to find a way of hiding the radio buttons (so keyboard control stays but the ugly inputs disappear). – abergmeier Nov 21 '12 at 15:48
  • Still I think it is frightening to how hacky html development gets in the year 2012. For shame. – abergmeier Nov 21 '12 at 15:55
  • And as a final touch you can _hide_ the option by adding the css `input[type='radio'] { opacity: 0.01; }` – abergmeier Nov 21 '12 at 17:39
0

You might want to look at Uniform. Its a nice and easy way to have complete design control over form elements. Indeed it does require JavaScript but if its not enabled by default Uniform degrades gracefully offering the standard form functionality.

Gary
  • 2,866
  • 1
  • 17
  • 20
0

Some browsers allow you to override the settings, but you are going to have to do some super CSS tricks to get it to work.

http://acidmartin.wordpress.com/2009/07/17/using-css-to-style-radiobuttons-and-checkboxes-for-safari-and-chrome/

is a good site that describes how to do what you are talking about. They use a sprite sheet and the browser specific -appearance style to change the look of the box dependent on state.

Pow-Ian
  • 3,607
  • 1
  • 22
  • 31