CSS accent-color属性基本效果实例页面

回到相关文章 »

效果:

控件们

  • 复选框:
  • 单选框
  • 范围选择框:
  • 进度条:
选择颜色:

代码:

HTML代码:
<ul id="ul">
    <li>复选框:<input type="checkbox" checked></li>
    <li>单选框<input type="radio" checked></li>
    <li>范围选择框:<input type="range"></li>
    <li>进度条:<progress value="0.5"></li>
</ul>

选择颜色:<input type="color" id="color" is="ui-color">
                
JS代码:
color.addEventListener('input', function () {
    ul.style.accentColor = this.value;
});