如何更改 qooxdoo 可编辑字段选择颜色？

Question

是否有一种简单的方法来更改各种可编辑 qooxdoo 字段（qx.ui.form.AbstractField 的所有子项）中的选择颜色。我想摆脱这个似乎是由浏览器强加的浅蓝色选择。

Answer 1

我认为目前 qooxdoo 主题化无法解决这个问题，但可以通过向全局 qooxdoo 样式表添加规则来解决这个问题。

您需要的关键信息是 ::selection 伪元素。请参阅 https://developer.mozilla.org/de/docs/Web/CSS/::selection and an answer for this on Whosebug 上的文档。

使用此信息 css 可以通过 qx.ui.style.Stylesheet.getInstance().addRule 为每个可选元素全局添加规则或专门为例如输入和文本区域。

将所有输入元素的选择背景颜色更改为红色的基本示例是：

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

由于 addRule 方法检查给定规则是否适用于当前浏览器，因此当您尝试向非 gecko 添加前缀为 -moz- 的规则时会出现异常基于浏览器。因此，您要么必须使用浏览器引擎开关来处理这个问题，要么尝试使用所有前缀并忽略异常。

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

这应该将所有输入和文本区域元素的选择背景颜色更改为红色。

当然，您也可以通过向规则添加 color属性来更改文本颜色。

并且您可以创建一个规则 *::selection，它将您的更改应用到所有元素。

Answer 2

我之前回答的补充：

您可以通过

解析颜色名称来使用主题颜色

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

并用它来组成规则中的 background-color 或 color 属性。

请注意，如果您使用动态主题更改，则必须重新应用规则以反映不同的主题颜色。

如何更改 qooxdoo 可编辑字段选择颜色？

How to change qooxdoo editable fields selection color?

theming

qooxdoo