In HTML, radio buttons are used inside forms to let the user select a single item from a group of multiple items. They are typically presented in groups, with only one button in the group being selected at any given time.
When you are working with these radio buttons, you might sometimes need to change their default appearance such as changing their size, color, background color, and so on.
However, what will be the size and color of the radio button depend on the user agent you are using. For example, in the chrome browser, the default size of a radio button is 13px X 13px along with a margin of 3px on each side.
In this article, I will show you different ways of increasing and decreasing the radio button size using CSS along with their pros and cons. These methods are as follows:
Method 1: Increase Radio Button Size using width and height Properties
The simplest way to increase or decrease the size of a radio button in CSS is to use the width and height properties.
If you want to change the size of the radio button, you have to keep the values of the width and height properties exactly the same.
Let’s say, we have two radio buttons in our HTML document:
<div>
Option 1: <input type="radio" name="options" value="option1"><br>
Option 2: <input type="radio" name="options" value="option2">
</div>
Now, we want to increase the size of these radio buttons. To do that, we can set their width and height properties to some higher values such as 25px or 30px based on our needs.
But, we have to make sure that the values of the width and height are kept exactly the same:
/* Increase radio button's size */
input[type='radio']{
width: 25px;
height: 25px;
}
Here is the outcome of the above code:
If the values of the width and height are not kept the same, the radio button’s appearance might distort which may ultimately result in a bad user experience.
One more thing you have to remember is that increasing the width and height does not increase the thickness of the surrounding border of the radio button.
Method 2: Increase Radio Button Size Using transform Property
The transform property in CSS is used to apply various types of 2D or 3D transformations to an element such as rotate, scale, skew, translate etc.
We can use the transform property with the scale() function to increase or decrease the size of a radio button.
The scale() function is a 2D transformation function which is used to resize an element by specifying a scaling factor. The scaling factor decides how much the element should be scaled.
If the value of the scaling factor is 1, it means that the element will not be scaled i.e. the size of the element will not change after applying the transformation.
But, if the value of the scaling factor is not 1, the element’s size might increase or decrease compared to its original size based on the value of the scaling factor.
For example, if the value of the scaling factor is 1.5, it means that the element’s size will increase by 50% after transformation. Similarly, if the value of the scaling factor is 0.5, the element’s size will decrease by 50% after applying the transformation.
Let’s say we want to double the size of the radio buttons, then we can pass the scaling factor as 2:
/* Double the radio button size */
input[type='radio']{
transform: scale(2);
margin-bottom: 15px; /* Apply some bottom margin */
}
You will get the following output after applying the above CSS:
If you have taken a closer look on the above image, you might have noticed that after applying the transformation, the thickness of the surrounding border is also doubled with the total size of the radio button.
It means, whether you increase or decrease the size of the radio button with the transform property, the thickness of the border will also change accordingly with the radio button’s size. Which is actually nice.
The width & height or transform which method should you choose to increase the radio button size?
In last few examples, we saw that we can either use the width and height properties or the transform property to increase or decrease the size of a radio button.
But, here comes the biggest question, which method should you choose when changing the radio button’s size?
Well, you can choose either of the two methods. If you choose the first approach, the thickness of the radio button’s border will not change with the total size of the radio button.
But, if you choose the second approach, the thickness of the radio button’s border will also change along with the radio button’s size. It means, larger radio buttons will have a thicker border while smaller radio buttons will have a thinner border.
You can see the difference in the below image:
Conclusion
In this article, we learned two ways to increase or decrease the radio button size.
You can either use the width and height properties to change the radio button’s size or you can also use the transform property with the scale() function.
Both methods can increase or decrease the radio button’s size. However, the end result of the two methods might differ.
Thanks for reading.
