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

Question

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

Answer 1

Я не думаю, что в данный момент это может обрабатываться 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 либо по всему миру для каждого выбираемого элемента, либо специально для, например, input и textarea.

Основным примером для changeing цвет выбора фона на красный для всех входных элементов, входящих бы:

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) {}; 
} 

Это должно изменить фоновый цвет выделения для всех элементов ввода и textarea на красный.

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

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

Answer 2

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

Вы можете использовать цвет темы расщепления названия цвета с помощью

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

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

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