Question

我正在使用GWT处理一个Web应用程序，其中有几个列表框用于各种事情。我想使用CSS类更改特定列表框的背景颜色（以表明它是用户的必填字段）。这很简单直到我找到的部分我无法让列表框完全采用我的CSS类。我想要注意的是，我正在使用UiBinder以及XML和Java的混合来创建和使用应用程序控件，而且我已经尝试禁用Google的标准主题得到这个整理。这是我到目前为止在Java代码中尝试过的内容：

@UiField
ListBox knownIssuesCombo;
...

public KnownIssuesPanel() {
  ...
  knownIssuesCombo = new ListBox();
  knownIssuesCombo.addStyleName("requiredField"); //This should work!!!
  //knownIssuesCombo.addStyleDependentName("-requiredField");
  //knownIssuesCombo.setStyleName("requiredField", true);
  //knownIssuesCombo.setStyleDependentName("-requiredField", true);
}

匹配的CSS：

.requiredField {
    background-color: Green;
}

.gwt-ListBox-requiredField {
    background-color: Green;
}

我实际上可以通过覆盖GWT的CSS来改变我的应用程序中所有列表框的外观：

.gwt-Listbox {
    background-color: Green;
}

但我不想让我的所有列表框变绿;我只是想影响一个特定的。任何有关此问题的帮助或见解将不胜感激！

Answer 1

试试这个：

background: green !important;

Answer 2

可能是基本的特异性问题（您的浏览器开发工具应该可以帮助您找到它）;基本上你可能有一个background-color .gwt-ListBox被定义在之后（在同一个CSS文件之后，或者在第二个文件之后加载的文件中） :) background-color的{{1}}，因为.requiredField和.gwt-ListBox选择器具有相同的specificity，后者获胜。

解决方案：

确保在.requiredField

.requiredField

或使用比.gwt-ListBox更具体的选择器，例如.gwt-ListBox
或使用dependent style name（.gwt-ListBox.requiredField和addStyleDependentName("required")选择器）

注意：.gwt-ListBox-required会起作用但是不好的做法（原因在于可访问性和用户选择（用户特定的样式表））

Answer 3

我认为默认情况下列表框会获得＆＃34; gwt-ListBox＆＃34;的类。添加名称而不是设置主样式名称时，新类将与空格连接，而不是连字符。

所以而不是

.gwt-ListBox-requiredField {
    background-color: Green;
}

尝试

.gwt-ListBox requiredField {
    background-color: Green;
}

我想。：）

我相信你也可以只使用setPrimaryStyleName，然后你的初始requiredField标签就可以了，但是我还没有使用那个。尝试一下，让我知道什么有效。

单个GWT列表框不接受CSS，但覆盖所有GWT列表框

3 个答案: