Web前端開發(fā)中相信很多人面對表單元素都會將其原始樣式重置或借助非表單元素來模擬表單控件,之所以這般操作,是因?yàn)楸韱慰丶@示取決于設(shè)備、操作系統(tǒng)和瀏覽器。為了達(dá)到UI風(fēng)格的統(tǒng)一,不得已而為之。
Web前端開發(fā)中表單控件是必不可少的一部分,很多人也知道它因“環(huán)境”(設(shè)備、操作系統(tǒng)與瀏覽器)變化而變化。下面了解下關(guān)于單選(input[type=radio])與復(fù)選(input[type=checkbox])表單控件顏色設(shè)置 -?accent-color。

input[type=checkbox]與input[type=radio]顏色設(shè)置 - accent-color
accent-color 語法
accent-color:auto/color;//auto:根據(jù)"環(huán)境"自動匹配//color:定義顏色
accent-color?默認(rèn)示例
<inputtype="checkbox"checkedid="cb"/><labelfor="cb">示例復(fù)選</label>
?默認(rèn)示例復(fù)選
如:設(shè)置accent-color顏色為紅色
<inputtype="checkbox"checkedid="cb"/><labelfor="cb">示例復(fù)選 - 設(shè)為紅色</label>
#cb{accent-color:red;}
在線示例效果

新的屬性,因此,瀏覽器需要最新版本方可顯示其效果。
accent-color 兼容

accent-color 各瀏覽器兼容性
accent-color 應(yīng)用場景
表單內(nèi)容中多組單選項(xiàng)或復(fù)選項(xiàng)中,著重(強(qiáng)調(diào))突顯某一選項(xiàng)組。
實(shí)際應(yīng)用可能不是很大,但也是個(gè)新屬性,新技巧,說不定哪天會用到;有用沒用,只要知道還有這么個(gè)設(shè)置即可!