/    /  CSS Radio Button

CSS Radio Button

 

CSS Radio buttons are applied when there is the requirement of a single selection from a group of items.

Designing the radio buttons using CSS is a captivating and creative task, which will provide a new look to the default radio button.

 

Example:

 

<!DOCTYPE html>
<html>
<style>
.container {
 display: block;
 position: relative;
 padding-left: 40px;
 margin-bottom: 20px;
 cursor: pointer;
 font-size: 25px;
}
h1{
color:pink;
}

/* Hide the default radio button */
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
}

/* custom radio button */
.check {
 position: absolute;
 top: 0;
 left: 0;
 height: 30px;
 width: 30px;
 background-color: lightgray;
 border-radius: 50%;
}

.container:hover input ~ .check {
 background-color: gray;
}

.container input:checked ~ .check {
 background-color: red;
}

.check:after {
 content: "";
 position: absolute;
 display: none;
}

.container input:checked ~ .check:after {
  display: block;
}

.container .check:after {
        top: 8px;
        left: 8px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: white;
}
</style>
<body>

<h1> Custom Radio Buttons</h1>
<label class="container">MBA
 <input type="radio" name="radio" checked>
 <span class="check"></span>
</label>
<label class="container">M.TECH
 <input type="radio" name="radio">
 <span class="check"></span>
</label>
<label class="container">B.TECH
 <input type="radio" name="radio">
 <span class="check"></span>
</label>
<label class="container">INTER
 <input type="radio" name="radio">
 <span class="check"></span>
</label>

</body>
</html>

 

OUTPUT:

 

CSS Radio Button