Как изменить цвет выделения редактируемых полей qooxdoo?

Есть ли простой способ изменить цвет выделения в различных редактируемых полях qooxdoo (все дочерние элементы qx.ui.form.AbstractField). Я бы хотел избавиться от этого голубого выделения, которое, кажется, навязано браузерами.


person Vincent Vandenschrick    schedule 09.12.2016    source источник


Ответы (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 на красный.

Конечно, вы также можете изменить цвет текста, добавив colorproperty к правилу.

И вы можете создать правило *::selection, которое будет применять ваши изменения ко всем элементам.

person level420    schedule 09.12.2016
comment
Можно ли использовать примененные цвета темы qooxdoo по имени в этом фрагменте кода? - person Vincent Vandenschrick; 09.12.2016

Одно дополнение к моему предыдущему ответу:

Вы можете использовать цвет темы, разрешив имя цвета через

var cssColor = qx.theme.manager.Color.getInstance().resolve('my-theme-color-name');

и используйте это, чтобы составить свойство background-color или color в правилах.

Обратите внимание, что если вы используете динамические изменения темы, вам необходимо повторно применить правила, чтобы отразить разные цвета темы.

person level420    schedule 09.12.2016