CSS第二十三课：input框中checkbox的样式

input框中checkbox的样式

添加样式前：

添加样式后：

html:

<input type="checkbox" name="btn" id="btn1"><label for="btn1">请阅读</label>

css:

<style type="text/css">
	input[type="checkbox"] {
		width: 20px;
		height: 20px;
		display: inline-block;
		text-align: center;
		vertical-align: middle;
		line-height: 18px;
		position: relative;
	}

	input[type="checkbox"]::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		background: #fff;
		width: 100%;
		height: 100%;
		border: 1px solid #d9d9d9
	}

	input[type="checkbox"]:checked::before {
		content: "\2713";
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		border: 1px solid #e50232;
		color: #e50232;
		font-size: 20px;
		font-weight: bold;
	}
</style>