PROWAREtech

articles » current » css » custom-checkboxes-and-radio-buttons

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

https://youtu.be/AoRPlAs2LuU


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE