css 自定义复选框

Posted 2021-05-13

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

// alert('Hello world!');

<input type="checkbox" id="awesome" autofocus />
<label for="awesome">Awesome!</label>
<br />
<input type="checkbox" id="awesome2" checked />
<label for="awesome2">Awesome!</label>
<br />
<input type="checkbox" id="awesome3" disabled />
<label for="awesome3">Awesome!</label>
<br />
<input type="checkbox" id="awesome4" checked disabled />
<label for="awesome4">Awesome!</label>

/**
 * Custom checkboxes
 */

input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
}

input[type="checkbox"] + label::before {
	content: '\a0';
	display: inline-block;
	vertical-align: .2em;
	width: .8em;
	height: .8em;
	margin-right: .2em;
	border-radius: .2em;
	background: silver;
	text-indent: .15em;
	line-height: .65;
}

input[type="checkbox"]:checked + label::before {
	content: '\2713';
	background: yellowgreen;
}

input[type="checkbox"]:focus + label::before {
	box-shadow: 0 0 .1em .1em #58a;
}

input[type="checkbox"]:disabled + label::before {
	background: gray;
	box-shadow: none;
	color: #555;
	cursor: not-allowed;
}

body {
	font: 150%/1.6 sans-serif;
}