JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div id="body">
		<h1>Accessible custom checkboxes and radio buttons – demo page</h1>
		<p>This is a demo document related to the article <a href="/archive/201211/accessible_custom_checkboxes_and_radio_buttons/">Accessible custom checkboxes and radio buttons</a>. Please see the article for context and information.</p>
		<fieldset>
			<legend>Favourite colour</legend>
			<div class="radio">
				<input type="radio" id="radio1-1" name="radio1" value="radio1">
				<label for="radio1-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</label>
			</div>
			<div class="radio">
				<input type="radio" id="radio1-2" name="radio1" value="radio2" checked="">
				<label for="radio1-2">Green</label>
			</div>
			<div class="radio">
				<input type="radio" id="radio1-3" name="radio1" value="radio3">
				<label for="radio1-3">Blue</label>
			</div>
			<div class="radio">
				<input type="radio" id="radio1-4" name="radio1" value="radio4">
				<label for="radio1-4">Magenta</label>
			</div>
			<div class="radio">
				<input type="radio" id="radio1-5" name="radio1" value="radio5">
				<label for="radio1-5">Yellow</label>
			</div>
		</fieldset>
		<fieldset>
			<legend>Favourite pizza fillings</legend>
			<div class="checkbox">
				<input type="checkbox" id="checkbox1-1" name="checkbox1" value="checkbox1">
				<label for="checkbox1-1">Cheese</label>
			</div>
			<div class="checkbox">
				<input type="checkbox" id="checkbox1-2" name="checkbox1" value="checkbox2" checked="">
				<label for="checkbox1-2">Tomato</label>
			</div>
			<div class="checkbox">
				<input type="checkbox"...

CSS

#body {
		width:70em;
		max-width:100%;
		margin:0 auto;
	}
	fieldset {
		margin-bottom:1em;
	}

/*
Use a media query to hide custom checkbox and radio button CSS from less capable browsers
See http://www.456bereastreet.com/archive/201206/using_media_queries_to_hide_css3_from_older_browsers/
*/

@media only screen {

	.checkbox,
	.radio {
		/* Enable absolute positioning of the hidden form controls */
		position:relative;
		/* Just a bit of space. */
		margin-bottom:0.5em;
		/*
		Match line-height to the height of the replacement image to ensure it
		doesn't get clipped
		*/
		line-height:22px;
	}
	fieldset :last-child {
		margin-bottom:0;
	}
	/* Position and hide the real checkboxes and radio buttons */
	input[type="checkbox"],
	input[type="radio"] {
		position:absolute;
		/* Match the image dimensions */
		width:22px;
		height:22px;
		/* Reset anything that could peek out or interfere with dimensions */
		overflow:hidden;
		margin:0;
		padding:0;
		border:0;
		outline:0;
		opacity:0;
	}
	/*
	Insert a pseudo element inside each label and give it a background
	image that will become the custom checkbox or radio button.
	Using inline-block lets you use vertical-align to adjust it vertically
	as needed.
	*/
	input[type="checkbox"] + label:before,
	input[type="radio"] + label:before {
		display:inline-block;
		width:22px;
		height:22px;
		margin-right:4px;
		background:url(http://www.456bereastreet.com/lab/custom-checkboxes-radio-buttons/radio-checkbox.png) no-repeat;
		content:" ";
		vertical-align:top;
	}
	/*
	Position the background image differently depending on the state of each
	checkbox and radio button.
	*/
	input[type="radio"]:focus + label:before {
		background-position:0 -22px;
	}
	input[type="radio"]:checked + label:before {
		background-position:0 -44px;
	}
	input[type="radio"]:checked:focus + label:before {
		background-position:-0 -66px;
	}
	input[type="checkbox"] + label:before {
		background-position:0 -88px;
	}
	input[type="checkbox"]:focus +...