Learn how to create a Pure CSS Radio Button using HTML and CSS in this step-by-step guide. Customize the design and ensure accessibility with best practices and examples.
Table of Contents
Radio buttons are web page elements that allow the user to select an option from a range of options. They are very similar to checkboxes. The difference is that the checkboxes are not limited to a choice. With radio buttons, when the user tries to select multiple options, the previous selection is deselected. In this blog post, we will show you how to create a Pure CSS Radio Button using HTML and CSS, and provide tips for customizing the design and ensuring accessibility.
Let's start making an amazing radio button Using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our radio button. To create a radio button using HTML, we will need to use the input element with the type attribute set to "radio". This will create a basic radio button that can be selected by the user.
The two radio input fields have the same name attribute "rdo", which means they belong to the same group, and the user can only select one option from the group. The first radio button has an id of "yes" and is checked by default, which means that it is the default option that is selected when the form is loaded. The second radio button has an id of "no".
The switch component is created with a div element that has a class of "switch". It contains two label elements, each of which is associated with one of the radio buttons by using the for attribute with the corresponding id. The switch also contains a span element that is used as the slider of the switch.
This type of switch interface is often used in user interfaces to let the user select one of two options, where the switch's position indicates which option is selected. In this case, the "Yes" option is selected by default when the form is loaded, and the switch slider is on the left side. If the user clicks the "No" option, the switch slider moves to the right side, indicating that the "No" option is selected.
After creating the files just paste the below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our radio button using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the radio button is in place, the next step is to add styling to the radio button using CSS.
Next, we will create our CSS file. We will use some basic CSS rules in this file to create our radio button.
The first part of the code sets some general styles for the page body, such as the font-family, font-weight, and background-color.
The next section of the code defines the styles for the switch component. It sets the position of the switch to absolute, which means it is positioned relative to the nearest positioned ancestor element. The top and left properties are used to center the switch in the middle of the page. The width and height of the switch are set to 150px and 50px respectively. The background color of the switch is set to #4cd964, which is a shade of green.
The switch span section of the code defines the styles for the switch slider. The slider is positioned in the middle of the switch using the top and left properties. The background color of the slider is white, and it is rotated -45 degrees using the transform property.
The switch span:after section of the code defines the styles for the slider handle. The handle is a small rectangle that is positioned on top of the slider using the margin-top property.
The input[type=radio] section of the code sets the display property of the radio input fields to none. This is done to hide the input fields, as they are not needed to display the switch.
The switch label section of the code defines the styles for the switch labels. The labels are positioned to the left and right of the switch, and they change color when the corresponding radio input field is selected. The color change is done using the color property.
The #no:checked ~ .switch section of the code defines the styles that are applied to the switch when the "no" radio input field is selected. The background color of the switch is changed to #ff3b30, which is a shade of red. The position of the slider is changed using the margin-left property, and the handle is rotated using the transform property.
The #no:checked ~ .switch label[for=no] section of the code defines the styles for the "no" label when the "no" radio input field is selected. The color of the label is changed to white.
The #yes:checked ~ .switch label[for=yes] section of the code defines the styles for the "yes" label when the "yes" radio input field is selected. The color of the label is changed to white.
This will give our radio button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
font-family: sans-serif;
font-weight: 800;
background-color: #d6cbcb;
}
.switch {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 50px;
text-align: center;
margin: -30px 0 0 -75px;
background: #4cd964;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 25px;
}
.switch span {
position: absolute;
width: 20px;
height: 4px;
top: 50%;
left: 50%;
margin: -2px 0px 0px -4px;
background: #fff;
display: block;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 2px;
}
.switch span:after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 12px;
margin-top: -8px;
background: #fff;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 2px;
}
input[type=radio] {
display: none;
}
.switch label {
cursor: pointer;
color: rgba(0,0,0,0.2);
width: 60px;
line-height: 50px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
label[for=yes] {
position: absolute;
left: 0px;
height: 20px;
}
label[for=no] {
position: absolute;
right: 0px;
}
#no:checked ~ .switch {
background: #ff3b30;
}
#no:checked ~ .switch span {
background: #fff;
margin-left: -8px;
}
#no:checked ~ .switch span:after {
background: #fff;
height: 20px;
margin-top: -8px;
margin-left: 8px;
}
#yes:checked ~ .switch label[for=yes] {
color: #fff;
}
#no:checked ~ .switch label[for=no] {
color: #fff;
} Final Output:
Conclusion:
In conclusion, creating a Pure CSS Radio Button using HTML and CSS is a great option for those who want to create a simple, yet stylish radio button that is also accessible. By following the steps outlined in this blog post, you can create a customized radio button and ensure accessibility for all users. Remember to test your radio button for accessibility and keep experimenting with different designs to find what works best for your needs.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
