Изменить неактивный цвет выделения в Firefox

Question

Когда я выбираю какой-то текст в Firefox, а затем окно или Iframe теряет фокус (выбирая адресную строку для примера), тогда выбор становится серым, даже если в css указан другой цвет.

Как сделатьизменить цвет для отключенного выделения в Firefox?

Что я пробовал:

<style>::selection { background-color: green; }</style>
<p>lorem ipsum</p>

Редактировать:

То, что я хочу использовать здесь, похоже ::inactive-selection, но оно еще не реализовано в Firefox.См. https://drafts.csswg.org/css-pseudo-4/#selectordef-inactive-selection

Связанная ошибка: https://bugzilla.mozilla.org/show_bug.cgi?id=706209

Кто-нибудь знает обходной путь?На данный момент, я рассматриваю возможность использования некоторых хаков JavaScript.Есть идеи как это сделать?

Answer 1

Нет, вы не можете

По крайней мере, не в Firefox.

Причина, по которой я отвечаю нет , заключается в том, чтобы сэкономить как ваше время, так и других, которые могут попытаться найти какие-то решения / взломать.

Поскольку вы уже знаете о спецификации CSS.Я мог бы добавить это,

Помните, что у Firefox есть своя собственная версия ::selection, ::-moz-selection.Он также имеет свою собственную версию :window-inactive, :-moz-window-inactive.К сожалению, совместное использование этих вещей не работает.

Источник: CSS Tricks

/* Does work */
::-moz-selection {
  background: rgba(255,0,0,0.9);
  color: white;
}
/* Doesn't work */
::-moz-selection:-moz-window-inactive {
  background: rgba(255,0,0,0.3);
}
/* Nor this */
:-moz-window-inactive::-moz-selection {
  background: rgba(255,0,0,0.3);
}

Также Bugzilla имеет давние ошибки, запрашивающие эту функцию и говорящие о том, что она не может обрабатывать неактивные выборы, но не отвечает на них.Вот список .Некоторым из них даже 11 лет.Я планирую поговорить с кем-то об этом и сам сообщить о новой ошибке с некоторыми более подробными сведениями, возможно, здесь добавится их ответ или номер ошибки, чтобы вы могли получать обновления.

Итак, на данный момент я думаю, что вам не нужно искать какие-то хаки, это только потратит ваше время.

Спасибо

Обновление: здесь ошибка , чтобы следить за bugzilla, давайте посмотрим, что скажет команда разработчиков.

Answer 2

Для выделения текста внутри одного узла / элемента возможный обходной путь может быть достигнут с помощью JavaScript.

• Вы можете прослушивать события focus и blur окна.
• В обработчике событий для события blur вы можете проверить, выбрано ли что-нибудь, обернуть элемент span вокруг выделенного текста и очистить выделение.
• В обработчике событий для события focus вы можете восстановить содержимое и выделение до его предыдущих состояний.

Демо-версия:

let range = null;
let span = null;

// browser-window looses focus (blur)
window.addEventListener('blur', function(event){
  let selection = window.getSelection();
  // abort if selection involves text from multiple nodes
  if (selection.anchorNode != selection.focusNode) {
    console.log('Selection over multiple nodes is not supported!');
    return;
  }
  // get range from current selection and wrap content in span with custom style
  range = selection.getRangeAt(0);
  span = document.createElement("span");
  span.classList.add("selection-custom-highlight");
  span.appendChild(range.extractContents());
  range.insertNode(span);
  // clear current selection in document
  selection.removeAllRanges();
});

// browser-window gets focus
window.addEventListener('focus', function(event){
  if (span) {
    let selection = window.getSelection();
    // replace span with text-node
    let node = document.createTextNode(span.textContent)
    span.remove();
    range.insertNode(node);
    span = null;
    // clear current selection in document
    selection.removeAllRanges();
    // add saved range to selection
    selection.addRange(range);
  }
});

::selection,
.selection-custom-highlight {
  background-color: green;
}

<div id="content-1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<hr>
<div id="content-2">
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Также возможно расширить этот обходной путь для обработки выделения текста в нескольких строках:

• Для этого вам нужно будет обернуть интервалы вокруг выделения в anchorNode и focusNode, используя значения anchorOffset и focusOffset.
• Вы также должны найти все текстовые узлы между anchorNode и focusNode ( См. Этот ответ ). И оберните каждый контент в span -узел.
• И когда окно восстанавливает фокус, вам придется отменить все модификации.

Примечание: Это может привести к множеству манипуляций с документом и, вероятно, к нежелательному поведению при использовании любых библиотек JavaScript, которые взаимодействуют или присоединяются к этим узлам.

Answer 3

Если браузер не поддерживает функцию, вы не можете использовать эту функцию.

Я знаю, что это не лучший ответ, но вы должны попробовать другой браузер.На самом деле я использую Храбрый !У него есть все функции, которые есть у Google Chrome, потому что он основан на Chromium .Это быстрее, блокирует рекламу и трекеры (вы можете отключить), обновлять HTTPS, загружать сайты быстрее и многое другое.

Brave - это проект с открытым исходным кодом на GitHub: https://github.com/brave

Youнадо попробовать!

Answer 4

Вы пробовали:

::-moz-selection {
  background-color: green;
}