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;
});