Colored checkbox

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 24px;
margin-bottom: 12px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Hide the browser’s default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 14px;
width: 14px;
background-color: #fff;
border: 1px solid #ff7c1f;
border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: “”;
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
left: 4px;
top: 0px;
width: 3px;
height: 8px;
border: solid #ff7c1f;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>

<h1>Custom Checkboxes</h1>
<label class=”container”>One
<input type=”checkbox” checked=”checked”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Two
<input type=”checkbox”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Three
<input type=”checkbox”>
<span class=”checkmark”></span>
</label>
<label class=”container”>Four
<input type=”checkbox”>
<span class=”checkmark”></span>
</label>

</body>
</html>

Published by