Today i am going to tell you how to create custom border to checkbox using css3 and html, This one of the simple concept really used when customize the form fields.In this process we first remove the default styles for check box and then will write new css for check box and also should write the new css for disabled check box.
In this below example shows the new border to the check box and disabled checkbox, Check the demo link to view the live result of this concept, I hope this is very useful to you.
In this below example shows the new border to the check box and disabled checkbox, Check the demo link to view the live result of this concept, I hope this is very useful to you.
Html code for checkbox border
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>How to create border to checkbox using css3</title>
<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<div class="section">
<h1>How to create border to checkbox using css3</h1>
<a href="http://www.sanwebcorner.com" class="btn">San Web Corner</a>
</div>
<div class="container">
<div class="left">
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
<p>
<input type="checkbox" id="test3" checked="checked" disabled="disabled" />
<label for="test3">Green</label>
</p>
</form>
</div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>How to create border to checkbox using css3</title>
<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<div class="section">
<h1>How to create border to checkbox using css3</h1>
<a href="http://www.sanwebcorner.com" class="btn">San Web Corner</a>
</div>
<div class="container">
<div class="left">
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
<p>
<input type="checkbox" id="test3" checked="checked" disabled="disabled" />
<label for="test3">Green</label>
</p>
</form>
</div>
</div>
</body>
</html>
Css code for checkbox border
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
overflow: hidden;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
/* checkbox aspect */
[type="checkbox"] + label:before,
[type="checkbox"] + label:after {
content: '';
position: absolute;
left: 0;
z-index: 1;
-webkit-transition: .2s;
transition: .2s;
}
/* Unchecked styles */
[type="checkbox"]:not(:checked) + label:before {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
}
[type="checkbox"]:not(:checked) + label:after {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
z-index: 0;
}
/* Checked styles */
[type="checkbox"]:checked + label:before {
top: 2px;
width: 6px; height: 12px;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid red;
border-bottom: 1px solid red;
-webkit-transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 20% 40%;
transform-origin: 100% 100%;
}
[type="checkbox"]:checked + label:after {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
z-index: 0;
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
top: 0;
box-shadow: none;
background-color: #444;
width: 19px; height: 19px;
border: 3px solid #444;
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
[type="checkbox"]:disabled + label {
color: #555;
}
[type="checkbox"]:disabled:not(:checked) + label:hover:before {
border-color: red;
}
0 Comments