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 開發技巧