in this quick tutorial, I will show you how to customize your radio button using only CSS. we will see some complex concepts in CSS, like selectors and pseudo-elements, so let's start.
I-HTML
first, let's create our elements using HTML, for this project we will need mainly 3 things
- Label element
- an input element with radio type
- a span element
we will also need a container element that will contain all our elements, And our Code should look like this:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Do you like our channel ?</h1>
<label>Yes
<input type="radio" name="test" value="yes">
<span class="radiocheck"></span>
</label>
<br>
<label>No
<input type="radio" name="test" value="no">
<span class="radiocheck"></span>
</label>
<br>
<button>Subscribe</button>
</div>
</body>
</html>
as you can see, we created a div element with a container class then we added three labels and inside each label, we have added the input element and a span element with a "radiocheck" class.
now before we see the CSS code let's see first what Pseudo-element and Selectors in CSS
2-Pseudo-elements
- ::after
- ::before
the ::after element allows you to add a span element after the selector, it's very easy to use and it's faster than creating an HTML span element
the ::before element do the same thing except it will create the span before our selector
3-Selectors
In CSS, a Selector allows us to select an HTML element.you probably don't know it but you use selectors every time that you use CSS, for example, the dot that we use to select a class is a selector.
in this tutorial, I will explain to You one important selector and it's the "~" selector. This selector allows you to select and element that is preceded by another element, let's take this example
input~span
in this example, we will only select all span that is preceded by an input element.
Now that we all know how this work let's Code our project
II-CSS CODE
body{
background: rgb(95,251,134);
background: -moz-linear-gradient(30deg, rgba(95,251,134,1) 0%, rgba(103,242,100,1) 100%);
background: -webkit-linear-gradient(30deg, rgba(95,251,134,1) 0%, rgba(103,242,100,1) 100%);
background: linear-gradient(30deg, rgba(95,251,134,1) 0%, rgba(103,242,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5ffb86",endColorstr="#67f264",GradientType=1);
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
box-shadow: 0px 2px 8px rgba(34,34,34,.4);
padding: 10px 40px;
width: 40%;
}
.container label{
position: relative;
display: block;
padding-left: 35px;
font-size: 22px;
user-select: none;
cursor: pointer;
font-weight: bold;
}
.container label input{
opacity: 0;
position: relative;
width: 0;
height: 0;
}
.container label .radiocheck{
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
border-radius: 100%;
background-color: #eee;
border: 2px solid #e2e2e2;
}
label:hover .radiocheck{
background-color: #d2d2d2;
}
.container label .radiocheck::after{
content: '';
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 21px;
height: 21px;
border-radius: 100%;
background-color: #4caf50;
display: none;
}
label input:checked ~ .radiocheck{
background-color: #d2d2d2;
}
label input:checked ~ .radiocheck::after{
display: block;
}
button{
padding: 10px 16px;
background-color: #00c853;
border: none;
color: #fafafa;
font-weight: bold;
font-size: 18px;
}
I hope that you liked this project if you want to see another project just comment and we will make it.
How to Make a Custom Radio Button in HTML and CSS
Reviewed by Medics
on
July 11, 2019
Rating:
Reviewed by Medics
on
July 11, 2019
Rating:
No comments: