1

Is there a simple way to change the selection color in the various editable qooxdoo fields (all children of qx.ui.form.AbstractField). I would like to get rid of this light-blue selection that seems to be imposed by the browsers.

Vincent Vandenschrick
  • 540
  • 3
  • 10

2 Answers2

1

I don't think this can be currently handled by qooxdoo themeing, but there is a solution by adding rules to the global qooxdoo stylesheet.

The key information you need is the ::selection pseudo element. Please see documentation at https://developer.mozilla.org/de/docs/Web/CSS/::selection and an answer for this on stackoverflow https://stackoverflow.com/a/23681913/6255232 .

Using this information css rules can be added via qx.ui.style.Stylesheet.getInstance().addRule either globally for every selectable element or specifically for e.g. input und textarea.

The basic example for changeing the selection background color to red for all input elments would be:

qx.ui.style.Stylesheet.getInstance().addRule(
  "input::selection", 
  "background-color:#ff0000"
);

As the addRule method checks if the given rule is applicable to the current browser, you'll get an exception when trying to add a rule with the prefix like -moz- to a non gecko based browser. So you either have to handle this using browser engine switches or by trying with all prefixes and ignoring the exceptions.

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

This should change the background-color of the selection for all input and textarea elements to red.

You may, of course, also change the text color by adding a colorproperty to the rule.

And you could create a rule *::selection which will apply your changes to all elements.

Community
  • 1
  • 1
level420
  • 829
  • 5
  • 8
0

One addition to my previous answer:

You could use a theme color by resolving the color name via

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

and use that to compose the background-color or color property in the rules.

Note that if you use dynamic theme changes you have to re-apply the rules to reflect the different theme colors.

level420
  • 829
  • 5
  • 8