PROWAREtech
CSS: Custom Checkboxes and Radio Buttons
Create custom checkboxes and radio buttons using only HTML and CSS.
Create custom checkboxes and radio buttons just like the ones pictured here. To create animated toggle buttons like on the iPhone, follow this link.
Create a base64 string of your images to use on these custom checkboxes/radio buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Checkboxes</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #eee;
color: #333;
padding: 25px;
}
.checkbox {
display: none;
}
.checkbox + label {
position: relative;
padding-left: 35px;
font-size: 30px;
}
/*
CONVERT IMAGES TO BASE64 STRINGS:
http://www.prowaretech.com/articles/current/tools/convert-image-to-base64
*/
.checkbox + label::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASJJREFUeNpi/P//PwMIxNfYnH//6Z0BAw1BYkBJYqBT0gIQmxFksV+e1n9NS1EGUVkemlkKsufMticMJurOU0oT+nMZ46qtz8sasRkIiHEy0ANc2PuMoT9rJxcTq+BPulkKAgo6ggwTVpZ8Y2JlY2agJ+AVZmd4+e0OAxMDnQEzCxMDM9tf+lsMAkzMjANjMdjyUYtHLR61eNTiUYtHLR61eNRiuoFf3/8wCPCIQSyG9SboAV7c/8LgqB3JwBRmWxp178I7ulj67dMvht8//352M4tkZHI0CF5uoe496e75twwfXn5n+PvnH02C99G1DwzP737+3B6zXRDedwKBt2/fcCw70vL99rMLDL///KCqxQLcogwuBrEMzkZhjDAxgAADAByIY5DC5JCPAAAAAElFTkSuQmCC);
position: absolute;
top: 50%;
left: 0;
margin-top: -15px; /* subtract half the height of the image */
}
.checkbox:checked + label::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnZJREFUeNpi/P//PwMI2Bban3/76Z0BAw1BSWhxYpJHwgIQmxFksVay7n9xIwkGHmkemlkKsufJvkcMTtoOU/oy+nIZbQrszrNrcxpwinAy0AM8PfKEYUf5Vi6mn7y/6GYpCAhpCDGULCj7xsTMxsxAT8AuyMFw99NdBiYGOgMmZiaGvyz/qG/xz58/GQ7vPYBXDSMzI3UtBlnqpuzK8GHye4Y7L27i9zk1LXVRdGYoMSkE869nXMNrORO1LHVWdGQoMytGEcdnOcUW/wJb6sBQblaKVT5YJ5R0i+/eus1w7tQZvJY6yIMsLcMq33KijeH0szOkWXzz6nWGM4WnGJ62PWY4eeQYpqW/fjHYydsxVFrgtvTwo6MMbGxsxFsMsvRC2TkGLlYuMP9Vz0sUy0GW2spZM1RbVJBlKVaLQcGLbCkMgC0/egxsqbWMJUONRRVWA1tPdBC0FKvFnz99xrAUbnn3SwZLGQuGOqsanJYeenSYoKVYLTYwMWIQL5XAqaHBqharePuJLqItxRnHZtaWeC3HZumBhweIthRvqibW8s5TUEvZ2UmrLPBJgiwXKxXHa+m++6RbSlTJZW5thdVySiwlusgEWS5eIoFkaTfDXgosBQEWYhWa2ViCLfdx8WN4/PEJAzsFlpJcSYAsf/XjNcWWUrU+HvQW//nxh0GcTwxiMaw3QQ/w+dFnhnCjMAamEtfiqHdX39LF0l+ffzH8/fXnc6RNBCNTsHngci9dj0lvrrxm+P7mG8O/v/9oErzvb71n+PTw4+dt2ZsF4X0nEHjz9g1Hy8727xcfX2D48fsnVS0W4xVjiDaPZAizCGWEiQEEGAB4wAgZylwHPAAAAABJRU5ErkJggg==);
}
</style>
</head>
<body>
<main>
<form action="#" method="post">
<input class="checkbox" type="checkbox" name="check1" id="check1" /><label for="check1">this is a check box</label><br />
<input class="checkbox" type="checkbox" name="check2" id="check2" checked /><label for="check2">this is a check box</label><br />
<input class="checkbox" type="checkbox" name="check3" id="check3" /><label for="check3">this is a check box</label><br />
<div><p> </p></div>
<input class="checkbox" type="radio" name="radio1" id="check4" checked /><label for="check4">these are radio buttons</label><br />
<input class="checkbox" type="radio" name="radio1" id="check5" /><label for="check5">these are radio buttons</label><br />
<input class="checkbox" type="radio" name="radio1" id="check6" /><label for="check6">these are radio buttons</label><br />
</form>
</main>
</body>
</html>
Coding Video
Comment
