#HTML #CSS #FORM: Custom accessible checkboxes and radio buttons. http://www.456bereastreet.com/archive/201211/accessible_custom_checkboxes_and_radio_buttons/ http://www.456bereastreet.com/lab/custom-checkboxes-radio-buttons/ http://cdpn.io/aBLqv

custom_accessible_checkbox_radio.css

/*
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;
	}
	/* 
	Position and hide the real checkboxes and radio buttons.
	The inputs are made transparent instead of completely hidden to preserve
	clickability in browsers that don't have clickable labels, like Safari for iOS 5 and older.
	*/
	input[type="checkbox"], input[type="radio"] {
		position:absolute;
		/* Reset anything that could peek out or interfere with dimensions */
		overflow:hidden;
		margin:0;
		padding:0;
		border:0;
		outline:0;

		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity:0;
	}
	label {
		position: relative;
		margin-left: 25px;
	}
	/*
	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 {
		position: absolute;
		left: -25px;
		top: 0;
		display: inline-block;
		width: 0.8333333333em;
		height: 0.8333333333em;
		line-height: 1em;
		padding: 2px 2px 4px 4px;
		background: #e5e5e5;
		background: -webkit-linear-gradient(top, #c5c5c5, #e5e5e5);
		background:    -moz-linear-gradient(top, #c5c5c5, #e5e5e5);
		background:      -o-linear-gradient(top, #c5c5c5, #e5e5e5);
		background:     -ms-linear-gradient(top, #c5c5c5, #e5e5e5);
		background:         linear-gradient(top, #c5c5c5, #e5e5e5);
		content: " ";
		margin-top: -0.08333333333em;/* 1px */
		cursor: pointer;
		text-align: center;
		vertical-align: top;
		border-radius: 2px;
		-webkit-box-shadow: inset 0 0 1px #fff;
		        box-shadow: inset 0 0 1px #fff;
		border: 1px solid #999999;
		color: #555;
	}
	input[type="radio"] + label:before {
		border-radius: 100%;
	}


	input[type="checkbox"]:checked + label:before {
		content: "\2713";
	}
	input[type="radio"]:checked + label:before {
		content: "\2022";
    fornt-weight: bold;
	}

	input:disabled + label:before {
		border-color: #bbb;
		color: #999;
		background: -webkit-linear-gradient(top, #e5e5e5, #f5f5f5);
		background: -moz-linear-gradient(top, #e5e5e5, #f5f5f5);
		background: -o-linear-gradient(top, #e5e5e5, #f5f5f5);
		background: -ms-linear-gradient(top, #e5e5e5, #f5f5f5);
		background: linear-gradient(top, #e5e5e5, #f5f5f5);
	}

	input[type="radio"]:focus + label:before,
	input[type="checkbox"]:focus + label:before {
		-webkit-box-shadow: 0 0 5px #1082e6;
		        box-shadow: 0 0 5px #1082e6;
		border-color: #1082e6;
		color: #1082e6;
	}

}

custom_accessible_checkbox_radio.html

<!--
http://www.456bereastreet.com/archive/201211/accessible_custom_checkboxes_and_radio_buttons/
http://www.456bereastreet.com/lab/custom-checkboxes-radio-buttons/
http://cdpn.io/aBLqv
https://gist.github.com/orioltf/4987705
-->
<link rel="stylesheet" href="custom_accessible_checkbox_radio.css" />
<div class="checkbox">
  <input type="checkbox" id="foo1" name="foo_check" />
  <label for="foo1" name="foo_check">A checkbox button</label>
</div>

<div class="checkbox">
  <input type="checkbox" id="foo2" name="foo_check" checked />
  <label for="foo2" name="foo_check">A checkbox button checked</label>
</div>

<div class="checkbox">
  <input type="checkbox" id="foo3" disabled />
  <label for="foo3">A checkbox button disabled</label>
</div>

<div class="checkbox">
  <input type="checkbox" id="foo4" checked disabled />
  <label for="foo4">A checkbox button checked disabled</label>
</div>

<div class="radio">
  <input type="radio" id="foo5" name="foo_radio" />
  <label for="foo5">A radio button</label>
</div>

<div class="radio">
  <input type="radio" id="foo6" name="foo_radio" />
  <label for="foo6">A radio button</label>
</div>

<div class="radio">
	<input type="radio" id="foo7" name="foo_radio" disabled />
	<label for="foo7">A radio button disabled</label>
</div>

<div class="radio">
	<input type="radio" id="foo8" name="foo_radio" checked disabled />
	<label for="foo8">A radio button checked disabled</label>
</div>