Introduction to CSS Radio Button
Radio Buttons can be used when the user only has to make one selection of items from a group. Radio buttons are usually used in a form where multiple choices are needed but only one. However, when you try to select several options, clicking a radio button that has not been selected would unselect the other option which was previously selected.
Radio buttons are just like checkboxes. The main difference is that they only require one selection of multiple items from a list. Gender selection (Male, Female) is a clear example of where radio buttons will be a suitable input item.
Syntax
The syntax for radio button can be written as shown below:
<input type="radio" name="myradio" value=”radio_value” id="radio_demo" class="form-radio" checked>
<label for="radio_demo">Radio</label>
Following are the attributes of radio button:
- type: It defines the input type control and it will set to radio.
- name: It is used to give the control a name that has been sent to the server for recognition, and to get the value.
- value: This value can be used when user selects the radio box.
- checked: This attribute will be used when you want to select the radio button by default.
How does radio button work in CSS?
Radio buttons will be used when two or more options are identified which are mutually exclusive and the user has to choose exactly one choice. In other words, clicking on a non-selected radio button would erase any other button that was selected on the list previously. Radio buttons include lower cognitive load, as they permanently keep all options visible such that users can easily analyse them. Radio buttons are also simpler to use for users who have difficulty in making effective mouse movements.
Examples to Implement CSS Radio Button
Now, some examples as described below:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS Radio Button Example </title>
<style>
.container {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 10px;
cursor: pointer;
font-size: 20px;
}
.container input {
position: absolute;
opacity: 0;
}
.radio_class {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 25%;
}
.container:hover input ~ .radio_class {
background-color: #4863A0;
}
.container input:checked ~ .radio_class {
background-color: #728C00;
}
.container .radio_class:after {
top: 10px;
left: 10px;
width: 10px;
height: 10px;
border-radius: 80%;
background: white;
}
</style>
</head>
<body>
<h2> Basic Radio Buttons </h2>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="radio_class"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="radio_class"></span>
</label>
</body>
</html>
Output: Open the file in a browser and it will produce the following result.
Explanation: In the above example, we have created custom radio buttons, where code will add background color when the radio button is checked and add another background color when the user mouse hovers on the radio button. The class called .radio_class is defined for adding CSS styles to radio buttons. The check attribute will be used to specify the default radio button. The radio buttons are created within the container and added CSS styles which could be defined after the content of each selected element.
4.5 (5,454 ratings)
View Course
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS Radio Button Example </title>
<style>
body{
background: #222222;
}
.container{
display: block;
position: relative;
margin: 20px auto;
height: auto;
width: 400px;
padding: 10px;
}
h2{
color: #ffffff;
}
ul li{
color: #00FA9A;
display: block;
position: relative;
border-bottom: 1px dotted #DAA520;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 200;
font-size: 1.15em;
padding: 25px 25px 25px 80px;
margin: 8px auto;
height: 20px;
z-index: 9;
cursor: pointer;
}
ul li:hover label{
color: #FAEBD7;
}
ul li .radio_demo{
display: block;
position: absolute;
border: 3px solid #AAAAAA;
border-radius: 100%;
height: 30px;
width: 30px;
top: 25px;
left: 30px;
z-index: 5;
}
ul li .radio_demo::before {
position: absolute;
content: '';
border-radius: 80%;
height: 20px;
width: 20px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
}
input[type=radio]:checked ~ .radio_demo {
border: 3px solid #0DFF92;
}
input[type=radio]:checked ~ .radio_demo::before{
background: #0DFF92;
}
</style>
</head>
<body>
<div class="container">
<h2> Indian Cricket Team Members: </h2>
<ul>
<li>
<input type="radio" id="option_one" name="selector">
<label for="option_one"> M S Dhoni</label>
<div class="radio_demo"></div>
</li>
<li>
<input type="radio" id="option_two" name="selector">
<label for="option_two"> Virat Kohli</label>
<div class="radio_demo">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="option_three" name="selector">
<label for="option_three"> Rohit Sharma </label>
<div class="radio_demo">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
</body>
</html>
Output:
Explanation: In the above example, radio buttons are created by using different kinds of CSS styles. We have defined radio buttons as list items by using ul and li tags. These are specified in the parent element called container and contains respective CSS styles for the radio buttons. The label has been used for options and various CSS styles are used for them and also defined color when the user hovers the mouse on the radio button labels. The code also displays respective colors before hovering and after hovering the mouse on radio buttons.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Radio Button Example </title>
<style>
body{
background:grey;
color:#fff;
}
#myradio{
position:relative;
width:40%;
margin:0 auto;
}
input[type="radio"]{
position:absolute;
right:2000%;
}
label{
float:left;
width:15%;
padding-bottom:15%;
margin:0 2%;
background:#A0522D;
border-radius:60%;
cursor:pointer;
}
#slider{
position:absolute;
left:0%;
top:0;
width:10%;
padding-bottom:9%;
margin:2% 0 0 6%;
background:#fff;
transition:transform 2s;
border-radius:60%;
animation-timing-function: ease-in-out;
transition: 0.3s left .06s ease-in-out;
}
#radio1:checked ~ #slider{ animation-name: one; left:0; }
#radio2:checked ~ #slider{ animation-name: two; left:15%; }
#radio3:checked ~ #slider{ animation-name: three; left:35%; }
#radio4:checked ~ #slider{ animation-name: four; left:65%; }
#radio5:checked ~ #slider{ animation-name: five; left:85%; }
@keyframes one{ 20%, 80% { transform:scale(0.6); } }
@keyframes two{ 20%, 80% { transform:scale(0.6); } }
@keyframes three{ 20%, 80% { transform:scale(0.6); } }
@keyframes four{ 20%, 80% { transform:scale(0.6); } }
@keyframes five{ 20%, 80% { transform:scale(0.6); } }
</style>
</head>
<body>
<h2> Radio Select - with Animated Slide </h2>
<div id="myradio">
<label for="radio1"></label>
<input id="radio1" name="radio" type="radio" />
<label for="radio2"></label>
<input id="radio2" name="radio" type="radio" />
<label for="radio3"></label>
<input id="radio3" name="radio" type="radio" />
<label for="radio4"></label>
<input id="radio4" name="radio" type="radio" />
<label for="radio5"></label>
<input id="radio5" name="radio" type="radio" />
<span id="slider"></span>
</div>
</body>
</html>
Output:
Explanation: In the above example, we have created the animated slide in the radio buttons. Here transition effects have been used for radio buttons while moving to the next button. The code uses at-rule @keyframes to manage the steps required in a CSS animation process by specifying keyframe styles. The @keyframes rule stipulates the code for the animation. The id ‘slider’ has been used to define transition and animation effects.
Advantages
Some of the advantages of the radio button are:
- When only one selection is acceptable, the radio buttons are designed to display lists of multiple items.
- The information is generally more accurate with radio buttons than open-ended inputs like text boxes.
- The user checks the option with ease and speed.
Conclusion
We have seen so far that the radio button is an important input control that can be used synonymously when the user needs an input. To improve the user experience of the form, it is very essential to have proper controls for taking input from the user. By definition, radio buttons always have precisely one preference, and you should not view them without a default choice. Using radio buttons to alter settings only, not as action buttons to make something occur. The changed settings will not take place until the user clicks on the command button.
Recommended Articles
This is a guide to CSS Radio Button. Here we discuss an introduction to CSS Radio Button, syntax, how does it work with examples. You can also go through our other related articles to learn more –
