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（＆＃34; my_css_class＆＃34;）来设置SelectElement的样式。

将css添加到你的html中：

 wr = WebRequest.CreateHttp(Url);
                wr.Method = "GET";

                 if (!string.IsNullOrEmpty(authHeader))
                    wr.Headers.Add("Authorization", "Bearer " + authHeader);

                wResp = (HttpWebResponse)wr.GetResponse();

                Stream dataStream = wResp.GetResponseStream();
                StreamReader reader = new StreamReader(dataStream);

                results = reader.ReadToEnd();

                reader.Close();

您还可以使用css找到很多关于样式的信息。

如果您正在使用任何其他GWT小部件，即ListBox，则可以使用.setStyleName（＆＃34; my_class_name＆＃34;）。您也可以将GWT ListBox包装到SelectElement并设置样式。

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

请点击此处了解详情：https://bavotasan.com/2011/style-select-box-using-only-css/

编辑：这里使用css样式下拉框的一些很好的示例：How to style a <select> dropdown with CSS only without JavaScript?

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

设置ListBox或下拉框的各个项目的样式。

CSS：

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

HTML选择项目例如

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

重新设置项目的GWT客户端代码

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

将样式设置为GWT ComboBox项目

1 个答案: