Почему Firefox не затеняет мои отключенные опции выбора? - PullRequest
0 голосов
/ 17 октября 2019

У меня есть этот 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>

1 Ответ

0 голосов
/ 18 октября 2019

В моем CSS у меня был хак, специфичный для Firefox, чтобы удалить пунктирные контуры из выбранных элементов:

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

Удаление этого из моего CSS исправило отключенные параметры и заставило их снова выглядеть нормальными.

Пунктирные контуры теперь снова видны, но мне уже все равно. Я думаю, это просто вопрос вкуса ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...