Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 227
Misha Moroshko Avatar asked Feb 07 '11 10:02

Misha Moroshko


People also ask

How do I resize a radio button in CSS?

You cannot change the size of the radio button. Typically people will design a custom UI element to replace the UI aspect of the checkbox/radiobutton. Clicking it results in a click on the underlying checkbox/radio button.

How do I make my radio button bigger in HTML?

Radiobutton looks better with "transform" than using "width" and "height" and it's much simpler than the other solutions. It actually does not look that bad to me. I tested on IE 11, Chrome and FF and they looked fine. Thanks!


1 Answers

This css seems to do the trick:

input[type=radio] {     border: 0px;     width: 100%;     height: 2em; } 

Setting the border to 0 seems to allow the user to change the size of the button and have the browser render it in that size for eg. the above height: 2em will render the button at twice the line height. This also works for checkboxes (input[type=checkbox]). Some browsers render better than others.

From a windows box it works in IE8+, FF21+, Chrome29+.

like image 162
user2745744 Avatar answered Oct 01 '22 02:10

user2745744