css选择器

:valid :invalid 校验表单

pattern 检查控件值的正则表达式

:valid 表单验证通过的样式

:invalid 表单未通过验证的样式

 

:checked 美化选项框

默认的选项框和设计稿不符合，样式太丑，没有引用第三方 ui 库，直接手写。原理是把原有的选项框隐藏掉，文字用 span 包裹，设计稿需要的样式直接写在 label 标签上面。选中样式通过 input:checked + label

参考代码

<div>
	<input type="radio" name="radioName" id="fed-engineer" >
	<label for="fed-engineer"></label>
	<span>前端工程师</span>
</div>
	input:checked + label {
	background-color: #f90;
}
label {
	margin-right: 5px;
	padding: 2px;
	border: 1px solid #f90;
	border-radius: 100%;
	width: 18px;
	height: 18px;
	background-clip: content-box;
	cursor: pointer;
	transition: all 300ms;
	&:hover {
		border-color: #09f;
		background-color: #09f;
		box-shadow: 0 0 7px #09f;
	}
}

::selection:改变选中文本选择颜色

::selection{ color:#37ca7c; }  可设置的颜色种类不多，可参考文档 参考文章 灵活运用 CSS 开发技巧