Custom radio, checkbox and select menu with css
How to create a custom checkbox and a custom select menu with CSS:
How to create custom radio with CSS only?
Custom radio button: It's type be a 'radio' when we required that look and feel should be according to the custom then we use very important thing "appearance: none" CSS property then you will get that radio button not appear. And then we required CSS before selector or you can use CSS after Selector. As given example below, here is available to a method for the custom radio button, custom checkbox and custom select menu or custom drop down.
First Method:
Custom radio button Code below-
.............................................................................................................................................
Second Method:--
HTML Code:
CSS Code:
How to create custom radio with CSS only?
Custom radio button: It's type be a 'radio' when we required that look and feel should be according to the custom then we use very important thing "appearance: none" CSS property then you will get that radio button not appear. And then we required CSS before selector or you can use CSS after Selector. As given example below, here is available to a method for the custom radio button, custom checkbox and custom select menu or custom drop down.
First Method:
Custom radio button Code below-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Radio with css</title>
<style>
.anythingRadio{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #0bf;
color: #000;
top: 10px;
height: 16px;
width: 16px;
border: 0;
border-radius: 50%;
border:1px solid #0bf;
cursor: pointer;
margin-right: 7px;
outline: none;
}
.anythingRadio:checked::before{
position: absolute;
left: 2px;
top: 2px;
content: '';
background-color: #0b6;
height: 10px;
border-radius: 50%;
width: 10px;
}
.anythingRadio:hover{
background-color: #aadeed;
}
.anythingRadio:checked{
background-color: #c4f1ff;
}
</style>
</head>
<body>
<input type="radio" value="one" class="anythingRadio" name="abc"> Radio
<input type="radio" value="two" class="anythingRadio" name="abc"> Radio 2
</body>
</html>
.............................................................................................................................................
Second Method:--
HTML Code:
<p class="radio"> <input type="radio" id="test1" name="radio-group" checked="">
<label for="test1">Sheo</label>
<input type="radio" id="test2" name="radio-group">
<label for="test2">Sagar</label>
</p>
<p class="radio">
<input type="radio" id="test3" name="radio-group">
<label for="test3">Kumar</label>
</p>
<p class="checkbox">
<input type="checkbox" id="check1" name="check-group" checked="">
<label for="check1">Sheo</label>
<input type="checkbox" id="check2" name="check-group">
<label for="check2">Sheo</label>
</p>
<p class="checkbox">
<input type="checkbox" id="check3" name="check-group">
<label for="check3">Sheo</label>
</p>
<p class="checkbox">
<input type="checkbox" id="check4" name="check-group">
<label for="check4">Sheo</label>
</p>
<p class="select">
<select>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
</select>
</p>
CSS Code:
<style>
.radio
[type="radio"]:checked,
.radio [type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
.radio
[type="radio"]:checked+label,
.radio [type="radio"]:not(:checked)+label {
position: relative;
padding-left: 22px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
padding-right: 15px;
}
.radio
[type="radio"]:checked+label:before,
.radio [type="radio"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 100%;
background: #fff;
}
.radio
[type="radio"]:checked+label:after,
.radio [type="radio"]:not(:checked)+label:after {
content: '';
width: 12px;
height: 12px;
background: #1c2956;
position: absolute;
top: 3px;
left: 3px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.radio
[type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
.radio [type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
/*
for checkbox */
.checkbox
[type="checkbox"]:checked,
.checkbox [type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
}
.checkbox
[type="checkbox"]:checked+label,
.checkbox [type="checkbox"]:not(:checked)+label {
position: relative;
padding-left: 22px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
padding-right: 15px;
}
.checkbox
[type="checkbox"]:checked+label:before,
.checkbox [type="checkbox"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ccc;
background: #fff;
}
.checkbox
[type="checkbox"]:checked+label:after,
.checkbox [type="checkbox"]:not(:checked)+label:after {
content: '';
width: 12px;
height: 7px;
position: absolute;
top: 4px;
left: 3px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
border-bottom: 3px solid #1c2956;
border-left: 3px solid #1c2956;
}
.checkbox
[type="checkbox"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.checkbox
[type="checkbox"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.select
select {
background: url(select-arrow-icon.png) no-repeat 96% 48%;
padding: 3px 3px;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none;
border: 1px solid #ddd;
width: 100px;
outline: none;
}
.select
select::-ms-expand {
display: none;
}
</style>
No comments:
Note: Only a member of this blog may post a comment.