自定义复选框不确定状态的强调色：解决 accent-color 失效问题

普通复选框 (选中时为紫色) 设置第一个复选框为不确定状态 (蓝色) 重置第一个复选框 const myCheckbox = document.getElementById(“my-checkbox”); const anotherCheckbox = document.getElementById(“another-checkbox”); const setIndeterminateButton = document.getElementById(“setIndeterminate”); const resetCheckboxButton = document.getElementById(“resetCheckbox”); // 初始状态 anotherCheckbox.checked = true; // 另一个复选框默认选中，显示 purple accent-color setIndeterminateButton.addEventListener(‘click’, () => { myCheckbox.indeterminate = true; // 设置为不确定状态 myCheckbox.style.backgroundColor = “blue”; // 强制设置为蓝色背景 myCheckbox.checked = false; // 不确定状态下 checked 属性通常为 false console.log(“第一个复选框已设置为不确定状态 (蓝色)”); }); resetCheckboxButton.addEventListener(‘click’, () => { myCheckbox.indeterminate = false; // 取消不确定状态 myCheckbox.checked = false; // 设置为未选中 myCheckbox.style.backgroundColor = “”; // 清除内联背景色，恢复 CSS 样式 console.log(“第一个复选框已重置”); }); // 监听第一个复选框的点击事件，以便手动切换状态时也能看到效果 myCheckbox.addEventListener(‘click’, (event) => { if (myCheckbox.indeterminate) { // 如果当前是不确定状态，点击后通常会变为选中状态 myCheckbox.indeterminate = false; myCheckbox.checked = true; myCheckbox.style.backgroundColor = “”; // 清除内联样式，accent-color接管 } else if (myCheckbox.checked) { // 如果当前是选中状态，点击后变为未选中 myCheckbox.checked = false; myCheckbox.style.backgroundColor = “”; } else { // 如果当前是未选中状态，点击后变为选中 myCheckbox.checked = true; myCheckbox.style.backgroundColor = “”; } console.log(“myCheckbox checked:”, myCheckbox.checked, “indeterminate:”, myCheckbox.indeterminate); });