javascript - 为什么 Firefox 不会使我禁用的选择选项变灰？

Question

我有这个 JavaScript:

let projectBox = document.getElementById("invoice_project_id");
let taskBoxes = document.getElementsByClassName("tasks");

function filterTasks() {
    let project = projectBox.options[projectBox.selectedIndex];
    let results = Array.from(taskOptions).filter(task => {
        return task.getAttribute("data-project-id") == project.value || task.value == "";
    })
    Array.from(taskBoxes).forEach(taskBox => {
        let source = taskBox.closest(".source");
        if (results.length > 2) {
            source.classList.add("active");
            taskBox.innerHTML = "";
            results.forEach(result => {
                if (result.getAttribute("data-charged") == "true") {
                    result.disabled = true; // some options get disabled here which works perfectly in all browsers except Firefox
                }
                taskBox.add(result.cloneNode(true));
            })
        } else {
            source.classList.remove("active");
        }
    })
}

它在所有浏览器中都能完美运行，除了 Firefox(Mac 上的最新版本)。

出于某种原因，在 Firefox 中，禁用的选择选项没有(!)变灰。它们在 HTML 中被禁用，但它们看起来像所有其他启用的选项。

我在这里缺少什么？

这是 Firefox 的错误还是我的代码有问题？

HTML:

<select class="tasks">
  <option value="">Please select a task...</option>
  <option data-project-id="375" data-charged="false" value="413">Do something</option>
  <option data-project-id="375" data-charged="true" value="196" disabled="">Do something else</option>
  <option data-project-id="375" data-charged="true" value="199" disabled="">Yet another task</option>
</select>

Answer 1

在我的 CSS 中，我使用了 Firefox 特有的 hack 来删除所选元素中的虚线轮廓:

&:-moz-focusring { // remove dotted outline in Firefox
  color: transparent;
  text-shadow: 0 0 0 #000000;
}

从我的 CSS 中删除它修复了禁用的选项，并使它们看起来再次正常。

虚线轮廓现在再次可见，但我不再那么在意了。我想这只是一个品味问题......