Есть ли простой способ изменить цвет выделения в различных редактируемых полях qooxdoo (все дочерние элементы qx.ui.form.AbstractField
). Я бы хотел избавиться от этого голубого выделения, которое, кажется, навязано браузерами.
Как изменить цвет выделения редактируемых полей qooxdoo?
Ответы (2)
Я не думаю, что в настоящее время это можно решить с помощью темы qooxdoo, но есть решение, добавив правила в глобальную таблицу стилей qooxdoo.
Ключевая информация, которая вам нужна, - это псевдоэлемент ::selection
. См. Документацию на странице https://developer.mozilla.org/de/docs/Web/CSS/::selection и ответ на это в stackoverflow https://stackoverflow.com/a/23681913/6255232.
Используя эту информацию, правила css могут быть добавлены через qx.ui.style.Stylesheet.getInstance().addRule
либо глобально для каждого выбираемого элемента, либо специально для, например, ввод и текстовое поле.
Базовый пример изменения цвета фона выделения на красный для всех элементов ввода:
qx.ui.style.Stylesheet.getInstance().addRule(
"input::selection",
"background-color:#ff0000"
);
Поскольку метод addRule
проверяет, применимо ли данное правило к текущему браузеру, вы получите исключение при попытке добавить правило с префиксом типа -moz-
в браузер, не основанный на gecko. Таким образом, вам нужно либо решить эту проблему, используя переключатели движка браузера, либо попытаться использовать все префиксы и игнорировать исключения.
var rules = [
"input::selection,textarea::selection",
"input::-moz-selection,textarea::-moz-selection",
"input::-ms-selection,textarea::-ms-selection",
"input::-webkit-selection,textarea::-webkit-selection"
];
for(var i=0;i<rules.length;i++) {
try {
qx.ui.style.Stylesheet.getInstance().addRule(
rules[i],
"background-color:#ff0000");
}
catch(ex) {};
}
Это должно изменить цвет фона выделения для всех элементов input и textarea на красный.
Конечно, вы также можете изменить цвет текста, добавив color
property к правилу.
И вы можете создать правило *::selection
, которое будет применять ваши изменения ко всем элементам.
Одно дополнение к моему предыдущему ответу:
Вы можете использовать цвет темы, разрешив имя цвета через
var cssColor = qx.theme.manager.Color.getInstance().resolve('my-theme-color-name');
и используйте это, чтобы составить свойство background-color
или color
в правилах.
Обратите внимание, что если вы используете динамические изменения темы, вам необходимо повторно применить правила, чтобы отразить разные цвета темы.