Possible to change appearance of radio button with css?

[Brian Cryer]

I think the answer to this is no, but it wouldn't be the first time I was
wrong, so ...

Question: Is it possible to change the appearance of a radio button using
css? What I'm actually after is the ability to change the button to look
like a tick-box, so changing the image used.

This came up when a colleague was talking to me about a small project. His
requirement is for the functionality of radio buttons but the appearance of
tick-boxes. I know this could be done using some JavaScript, what I was
wondering was whether there was a solution that didn't rely on client side
scripting.

Thanks.

 

[Jukka K. Korpela]

Scripsit Brian Cryer:

Question: Is it possible to change the appearance of a radio button
using css?

Absolutely maybe. It depends. You might be able to change their size, for
example, by setting the width and height properties. You cannot change most
aspects of rendering of radio buttons, though, thank &Deity;.

His requirement is for the functionality of radio buttons
but the appearance of tick-boxes.

That means intentionally misleading people. Interesting functionality.

I know this could be done using
some JavaScript, what I was wondering was whether there was a
solution that didn't rely on client side scripting.

You could do this by using a <noscript> element containing normal radio
buttons (so the page would actually _work_ when JavaScript is disabled) and
some JavaScript code that adds a set of images into the document tree and
associates onclick handlers with them, so that when clicked on, the image
changes and the form data is changed too.

Of course, the approach would break the normal functionality of radio
buttons in keyboard-only use, among other things.

 

[Andy Dingley]

Question: Is it possible to change the appearance of a radio button using
css?

Usually yes, but only in minor ways. Most of the presentation of UI
controls is dependent entirely on the browser and only minor
properties (such as background-color) are amenable to change through
CSS.

Some browsers may support additional CSS properties to set more
properties on an control, but these are browser-specific (AFAIR,
there's a bunch of these for Mozilla)