将样式设置为GWT ComboBox项

Question

我需要更改一些comboBox元素的颜色。我读过这个主题：Set style to GWT ListBox items

然而，情况并不相同。因为当我尝试实现它时：

SelectElement selectElement = SelectElement.as(combo.getElement());
         NodeList<OptionElement> options = selectElement.getOptions();

         for (int i = 0; i < options.getLength(); i++) {
              options.getItem(i).getStyle().setColor("#FF0000");
         } 

在第一行编译器中返回错误：java.lang.AssertionError: null

我开始认为没有改变颜色的可能性，还是我错了？

结果应该是这个沃尔沃选项：http://bustas.lrytas.lt/nekilnojamasis-turtas/geda-vilniaus-merams-ne-vienas-neissprendzia-opiausios-bedos.htm

Answer 1

我相信您可以使用.setClassName("my_css_class")来设计SelectElement的样式。

将css添加到html中，如下所示：

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   }

你也会发现很多关于使用css的样式的信息。

如果您正在使用任何其他GWT小部件(即ListBox )，则可以使用.setStyleName("my_class_name")。您也可以将GWT ListBox封装到SelectElement中，并将其样式化。

ListBox listBox = ListBox.wrap(mySelectElement);
listBox.setStyleName("my_css_class");

请看这里的更多信息：https://bavotasan.com/2011/style-select-box-using-only-css/

编辑:在这里使用css样式下拉框的一些优秀示例： dropdown with CSS only without JavaScript?

编辑2下拉框的自定义样式

为ListBox或下拉框的单个项设置样式。

CSS：

    .selectbox {
        border: 3px;
        border-radius: 5px;
        padding: 4px;
        background-color: #44f;
    }
    .optioncss {
        background-color: #888;
    }

例如，HTML选择项

    <select id="selectbox" class="selectbox">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>

GWT客户端代码以重新样式项

    ListBox select = ListBox.wrap(RootPanel.get("selectbox").getElement());
    SelectElement elem = (SelectElement)select.getElement().cast();
    elem.getOptions().getItem(0).setDisabled(true);
    elem.getOptions().getItem(1).setClassName("optioncss")