Question

是否有一种简单的方法可以更改各种可编辑qooxdoo字段（{{1}}的所有子项）中的选择颜色。我想摆脱这种似乎是由浏览器强加的淡蓝色选择。

Answer 1

我认为目前qooxdoo主题可以处理这个问题，但是通过向全局qooxdoo样式表添加规则有一个解决方案。

您需要的关键信息是::selection伪元素。请参阅https://developer.mozilla.org/de/docs/Web/CSS/::selection上的文档以及stackoverflow https://stackoverflow.com/a/23681913/6255232上的答案。

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

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

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

由于addRule方法检查给定规则是否适用于当前浏览器，因此在尝试将具有-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) {};
}

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

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

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

Answer 2

我之前回答的一个补充：

您可以通过

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

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

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

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

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

2 个答案: