將樣式設置爲GWT組合框項目

我需要更改某些組合框元素的顏色。我讀過這個話題： Set style to GWT ListBox items 將樣式設置爲GWT組合框項目

但是它不一樣。因爲當我嘗試實現這個：

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

我開始覺得沒有posibility變色，還是我錯了？

結果應該是這樣的沃爾沃選項：http://bustas.lrytas.lt/nekilnojamasis-turtas/geda-vilniaus-merams-ne-vienas-neissprendzia-opiausios-bedos.htm

來源

2016-12-09 Dovydas Gusarovas

我相信你可以使用.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列表框包裝到SelectElement中，並對其進行設計。

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

編輯：這裏使用CSS樣式下拉框的一些很好的例子：How to style a <select> dropdown with CSS only without JavaScript?

EDIT 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")

來源

2016-12-09 10:32:11 WLGfx

感謝您的幫助。但我需要用'Combobox'而不是'ListBox'對象來做所有事情。 –

.setStyleName（）也適用於組合框 – WLGfx

但是，您可以使用Java獲取每個元素。像這樣：'combobox.getItemsList（）'爲每個元素設置樣式。我想要達到的結果是http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled（VOLVO示例） –

將樣式設置爲GWT組合框項目

回答

相關問題