Radio Button CSS
CSS Radio Button with Source Code Programming.
Hello guys, in this tutorial we will learn CSS Radio Button, how to create radio button, create radio button is not hard but here we learn to design a button with different-different properties and different styles.
Here we learn how to style the check boxes and radio button inputs with the help of the <label> element.
Before learning look the demo of Radio Button below-
What is Radio Button in HTML?
The radio button is a graphic control element that allowing a single value to selected out of multiple-choice options, that means you can select only one radio buttons given groups of multiple options at the same time.
Radio button is a list of circular holes that can contain white space or a dot.
In radio button when one of the buttons is pressed than other buttons pop out automatically, leaving only one button pressed in the ‘push in’ state.
We use radio input <input type= “radio”> to insert the radio button.
In this tutorial we also provide you the source code of HTML and CSS of the Radio Button, it’s can help you to create the stylish and fantastic Radio Button projects in your webpages.
Design Radio Button with CSS
Now we start to create a simple radio button with the help of HTML and designed it with the CSS properties.
Stylish CSS Radio Button Design;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stylish Radio Button</title>
<style type="text/css">
body,html{
padding: 10px;}
input[type="radio"]{
display: none;
}
div{
border: 2px solid red;
padding: 5px;
border-radius: 20px;
label{
display: block;
padding: 5px;
border: 1px solid blue;
margin: 10px;
border-radius: 10px;
border-bottom: 2px solid red;
}
label>span{
display: inline-block;
width: 10px;
height: 10px;
border: 2px blue solid;
border-radius: 10px;
margin-right: 10px; }
input[type="radio"]:checked + label{
color: white;
background: green; }
input[type="radio"]:checked + label>
span{
background:rgb(255, 174, 0)
}
label:hover{
border-bottom: 2px
green solid;
}
</style>
</head>
<body>
<div>
<form action="">
<h2>Stylish Radio Button HTML & CSS</h2>
<p>Q. Choose youe gender-</p>
<input type="radio" value="male"
name="gender" id="male">
<label for="male"><span></span>Male
</label>
<input type="radio" value="female"
name="gender" id="female">
<label for="female"><span></span>Female
</label>
</form>
</div>
</body>
</html>
|
Output of above programming;
 |
Above output of programming, you can see the simple stylish radio button, if you copy this code and use to own project, then run programming it work fantastic. If you select the one of them option its background color will be changed and span background is also changed, so it is very fantastic design.
This is one more example of radio button, here we add the more than two option but you can select the only one option. You can copy this source code and make your own project.
Stylish Radio Button in CSS;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stylish Radio Button</title>
<style type="text/css">
*{box-sizing: border-box;}
body, html{
margin: 2px;
padding: 10px;
line-height: 5px;
}
input[type="radio"]{
display: none;
}
h2{
text-decoration: underline blue;
text-align: center;
}
div{
border: 2px solid green;
padding: 5px;
border-radius: 10px;
background: lightyellow;}
label{
display: block;
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid blue;
box-shadow: 05px 10px 0 yellow;
border-radius: 10px;
}
label > span{
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid goldenrod;
border-radius: 50%;
margin-right: 20px;}
input[type="radio"]:checked+ label> span,
input[type="radio"]:checked + label
> span {
background: #0076ff; }
input[type="radio"]:checked+ label,
input[type="radio"]:checked + label {
background: green;
color: white;}
label:hover{
border-bottom: solid blue;
}
#question{
color: red;
}
</style>
</head>
<body>
<div>
<h2>Stylish Radio Button HTML & CSS</h2>
<p>You can select only one option
in Radio inputs.</p>
<form action="">
<p id="question">Q. Chose your favourite
Programming Language-</p>
<input type="radio" name="radio-button"
value="HTML" name="HTML" id="HTML">
<label for="HTML"><span></span>HTML
</label>
<input type="radio" name="radio-button"
value="C++" name="C++" id="C++">
<label for="C++"><span></span>C++
</label>
<input type="radio" name="radio-button"
value="CSS" name="CSS" id="CSS">
<label for="CSS"><span></span>CSS</label>
<input type="radio" name="radio-button"
value="Java" name="Java" id="Java">
<label for="Java"><span></span>Java
</label>
<input type="radio"
name="radio-button" value="Python"
name="Python" id="Python">
<label
for="Python"><span></span>Python</label>
</form>
</div>
</body>
</html>
|
Output of above programming examples;
 |
Above you can see the output of programming, here we add five radio buttons and option but you can select only one option all of them, because we take same name of value in all radio outputs, if you can write different-different name property then you choose all the radio button.
Here we make one more programming of radio button, it’s different design and style from above programming, here we take more radio buttons for more options and designed it different above two programming.
Here we make the first HTML document then link the CSS document, we provide you both source code HTML and CSS.
Programming Example of Radio Button CSS;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stylish Radio Button</title>
<style type="text/css">
*{box-sizing: border-box;}
body,html{
padding: 5px;
}
input[type="radio"]{
display:none;
}
p{color: brown;}
div{
border: 2px solid darkblue;
padding: 5px;
margin:10px;
border-radius: 20px;
background:lightskyblue;
}
label{
display: block;
padding: 5px;
border: 1px solid blue;
margin: 10px;
background: white;
border-radius: 10px;
border-bottom: 3px solid
rgb(0, 201, 191);}
label>span{
display: inline-block;
width: 10px;
height: 10px;
border: 2px blue solid;
border-radius: 10px;
margin-right: 10px;
}
input[type="radio"]:checked + label{
color: white;
background: green; }
input[type="text"]{
margin: auto;
padding: 3px;
display: inline-block;
outline: none;
border: 1px blue solid;
border-radius: 20px;
width:100%;
}
input[type="radio"]:checked + label>
span{
background:rgb(255, 174, 0)
}
label:hover{
border-bottom: 3px green solid;
}
.button{
text-align: center;
border: none; }
h3, h4{
text-align: center;
text-decoration: underline
wavy green;
}
input[type="submit"]
{
border: 1px green solid;
border-radius: 20px;
width: 50;
margin: 0 ;
font-size: 105%;
padding: 5px;
color: #0076ff;
background: white;
} input[type="submit"]:hover{
color: white;
background: #048d1b;
border: 1px solid white;
font-weight: bold;}
</style>
</head>
<body>
<div>
<form action="action.html">
<h3>Created By StudyMuch</h3>
<h4>Stylish Radio Button with
HTML & CSS</h4>
<p>Q. Choose youe gender-</p>
<inputtype="radio"value="male"
name="gender"id="male">
<labelfor="male"><span></span>Male
</label>
<input type="radio" value="female"
name="gender" id="female">
<label for="female"><span></span>Female
</label>
<p>Q. Choose Religion-</p>
<input type="radio" value="Hindu"
name="religion" id="Hindu">
<label for="Hindu"><span></span>Hindu
</label>
<input type="radio" value="Muslim"
name="religion" id="Muslim">
<label for="Muslim"><span></span>Muslim
</label>
<input type="radio" value="Sikh"
name="religion" id="Sikh">
<label for="Sikh"><span></span>Sikh
</label>
<input type="radio" value="Isai"
name="religion" id="Isai">
<label for="Isai"><span></span>Isai
</label>
<p>Q. Choose your favourite
programming language-</p>
<input type="radio" value="HTML"
name="language" id="HTML">
<label for="HTML"><span></span>HTM
L</label>
<input type="radio" value="CSS"
id="CSS" name="language">
<label for="CSS"><span></span>CSS
</label>
<input type="radio" value="Java Script"
id="Java Script" name="language">
<label for="Java Script"><span></span>Java
Script</label>
<input type="radio" value="C++"
id="C++" name="language">
<label for="C++"><span></span>C++</label>
<label>Other Language; <input type="text"
id="other" name="other"></label>
<p class="button"><input
type="submit" required
type="submit" value="Submit Data"><p>
</form>
</div>
</body>
</html>
|
Output of above programming;
 |
Above output of programming, you see the video we create more radio button for more options, you can copy this and code and make own project on your webpages. In this tutorial we learned how designed and style the Radio Input Type with three types.
Also Read-
1 Comment
smortergiremal · November 4, 2024 at 4:50 pm
I love your blog.. very nice colors & theme. Did you create this website yourself? Plz reply back as I’m looking to create my own blog and would like to know wheere u got this from. thanks