ToB企服应用市场:ToB评测及商务社交产业平台

标题: CSS中的accent-color如何使用 [打印本页]
作者: 鼠扑    时间: 2025-1-16 01:00
标题: CSS中的accent-color如何使用
媒介

accent-color是CSS 2022年推出的一个新属性，它能修改input默认控件的颜色，支持的input控件元素包括复选框（<input type="checkbox">）、单选框（<input type="radio">）、范围选择框（<input type="range">）和进度条（<progress>）。在黑暗模式下，该属性也能适配。
此外，accent-color属性是可继承的，可以在根级别设置，也可以在单个元素上设置。例如：
   在根级别设置：:root { accent-color: lime; }  
在单个元素上设置：form { accent-color: lime; } 或 input[type="checkbox"] { accent-color: hotpink; }  目前，accent-color在Chrome、Edge、Firefox和Safari技能预览版中已经得到了支持。
示例 1：全局设置 accent-color

在这个示例中，我们在文档的根元素上设置了 accent-color，这将影响页面上所有的相关输入元素。
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <style>  
  5.     :root {  
  6.       accent-color: blue; /* 设置全局的 accent-color 为蓝色 */  
  7.     }  
  8. </style>  
  9. </head>  
  10. <body>  
  11.   <input type="checkbox" id="checkbox1">  
  12.   <label for="checkbox1">Checkbox 1</label><br>  
  13.   <input type="radio" id="radio1" name="radioGroup">  
  14.   <label for="radio1">Radio 1</label><br>  
  15.   <input type="range" min="0" max="100" value="50"><br>  
  16.   <progress value="22" max="100"></progress>  
  17. </body>  
  18. </html>
复制代码
示例 2：特定元素设置 accent-color

在这个示例中，我们只为复选框设置了 accent-color。
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <style>  
  5.     input[type="checkbox"] {  
  6.       accent-color: green; /* 仅设置复选框的 accent-color 为绿色 */  
  7.     }  
  8. </style>  
  9. </head>  
  10. <body>  
  11.   <input type="checkbox" id="checkbox2">  
  12.   <label for="checkbox2">Checkbox 2 (green accent)</label><br>  
  13.   <input type="radio" id="radio2" name="radioGroup">  
  14.   <label for="radio2">Radio 2 (default accent)</label><br>  
  15.   <input type="range" min="0" max="100" value="50"><br>  
  16.   <progress value="22" max="100"></progress>  
  17. </body>  
  18. </html>
复制代码
示例 3：使用 CSS 变量设置 accent-color

你还可以使用 CSS 变量（也称为自定义属性）来设置 accent-color，如允许以更轻易地在整个网站中更改颜色。
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <style>  
  5.     :root {  
  6.       --accent-color: purple; /* 定义 CSS 变量 */  
  7.     }  
  8.     input[type="checkbox"],  input[type="radio"],  input[type="range"],  progress {  
  9.       accent-color: var(--accent-color); /* 使用 CSS 变量设置 accent-color */  
  10.     }  
  11. </style>  
  12. </head>  
  13. <body>  
  14.   <input type="checkbox" id="checkbox3">  
  15.   <label for="checkbox3">Checkbox 3 (purple accent)</label><br>  
  16.   <input type="radio" id="radio3" name="radioGroup">  
  17.   <label for="radio3">Radio 3 (purple accent)</label><br>  
  18.   <input type="range" min="0" max="100" value="50"><br>  
  19.   <progress value="22" max="100"></progress>  
  20. </body>  
  21. </html>
复制代码
请留意，accent-color 的支持环境大概会因浏览器而异，因此在现实使用之前，最好检查你的目标浏览器是否支持该属性。
此外，accent-color 大概不实用于所有输入元素，因此始终发起在现实环境中测试其功能。
关于优联前端

        武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技能研究的科技创新型公司，为合作伙伴提供专业高效的前端办理方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教诲， 医疗，餐饮等。有效的办理了合作伙伴的前端技能难题，节省了成本，实现合作共赢。承接Web前端，微信小步伐、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技能研发。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4