input[type=checkbox]與input[type=radio]顏色設(shè)置 - accent-color

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è)置即可!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容