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中，禁用的选择选项为 not （！）灰色。它们在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中删除此问题后，修复了禁用的选项，并使它们再次看起来正常。

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

Answer 2

今天遇到此问题，发现Firefox由于某些原因不再尊重选项的opacity设置。我以前有适用于Firefox的规则：

option:disabled { opacity: 0.4; }

此外，在父项color上设置select属性似乎会破坏已禁用选项的本机样式。解决方法是将我的opacity规则更改为color：

option:disabled { color: #ccc; }

这或多或少提供相同的视觉效果。奇怪的是，在选择菜单上设置color会破坏浏览器对禁用选项的支持-甚至可能说这是一个错误。

Answer 3

这对我有用（仅适用于 Firefox）。注意：重要的更改颜色，如果使用 #000 不起作用将灰色背景移除到选项中：

select{
  background-color: #fff;
  border: 1px solid #999;
}
option{
  background-color: transparent;
  color: #222;
}

Firefox为什么不将禁用的选择选项显示为灰色？

3 个答案: