时间戳

首页 > 解决方案 > 为什么 Firefox 不会让我禁用的选择选项变灰？

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

问题描述

我有这个 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>

标签： javascripthtmlfirefox

解决方案

在我的 CSS 中，我有一个特定于 Firefox 的 hack，可以从选择元素中删除虚线轮廓：

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

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

虚线轮廓现在再次可见，但我不再关心那么多。我猜这只是口味问题...

推荐阅读