How to change the size of the radio button using CSS?

html css radio-button
Misha Moroshko picture Misha Moroshko · Feb 7, 2011 · Viewed 302.3k times · Source

Is there a way to control the size of the radio button in CSS ?

Answer

LapinLove404 picture LapinLove404 · Feb 7, 2011

Yes, you should be able to set its height and width, as with any element. However, some browsers do not really take these properties into account.

This demo gives an overview of what is possible and how it is displayed in various browsers: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

As you'll see, styling radio buttons is not easy :-D

A workaround is to use JavaScript and CSS to replace the radio buttons and other form elements with custom images:

Related questions

How do I change the color of radio buttons?

I mean, a radio button itself consists of a round shape and a dot at the center (when the button is selected). What I want to change is the color of both. Can this be done using CSS?

Read More
Radio/checkbox alignment in HTML/CSS

What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based: <table> <tr> <td><input type="radio" …

Read More
How do I style (css) radio buttons and labels?

Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels? Also let me state that I use the yui …

Read More