W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> input[type=checkbox] { accent-color: red; /* 复选框的强调色设置为红色 */ } input[type=radio] { accent-color: green; /* 单选按钮的强调色设置为绿色 */ } input[type=range] { accent-color: rgb(0, 0, 255); /* 范围滑动条的强调色设置为蓝色（RGB格式） */ } progress { accent-color: hsl(39, 100%, 50%); /* 进度条的强调色设置为HSL格式的某种颜色（色调39，饱和度100%，亮度50%） */ } </style> </head> <body> <h1>accent-color 属性</h1> <h3>复选框的强调色：</h3> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" checked> <label for="vehicle1">我有自行车</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" checked> <label for="vehicle2">我有汽车</label><br><br> <h3>单选按钮的强调色：</h3> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS" checked> <label for="css">CSS</label><br> <h3>范围滑动条的强调色：</h3> <label for="vol">音量：</label> <input type="range" id="vol" name="vol" min="0" max="50"> <h3>进度条的强调色：</h3> <label for="file">下载进度：</label> <progress id="file" value="72" max="100"> 72% </progress> </body> </html>