將CSS應用於嵌套在<h：selectOneMenu>中的<f：selectItem>

我想要將特定於<f:selectItem>的CSS應用於<h:selectOneMenu>，以便以不同的樣式顯示。將CSS應用於嵌套在<h：selectOneMenu>中的<f：selectItem>

例如我希望下面列表中的每個咖啡選項都以不同的顏色顯示。

<h:selectOneMenu value="#{user.favCoffee1}"> 
    <f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" /> 
    <f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" /> 
    <f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" /> 
</h:selectOneMenu>`

任何人都可以幫助我嗎？

來源

2011-07-19 Sana

-4

我不熟悉JSF，但我認爲<f:selectItem>不是發送到瀏覽器。

您需要弄清楚發送給該JSF標記的瀏覽器的HTML 是什麼，然後將CSS應用到該標記。

來源

2011-07-19 13:28:19

<f:selectItem>呈現HTML <option>元素。它具有非常有限的CSS樣式支持。 color財產不在其中。更重要的是，它僅適用於MSIE，不適用於其他網頁瀏覽器。然而，沒有辦法通過JSF給每個<option>元素自己的style屬性，所以最接近你可以得到的是對所有選項應用CSS規則，並接受它僅在MSIE中工作。

<h:selectOneMenu styleClass="mymenu">

與

.mymenu option { 
    color: red; 
}

最好的辦法是用CSS/JavaScript的一個好球，模仿它看起來像一個下拉以取代由<ul><li>下拉。一些JSF組件庫具有這樣的組件，例如PrimeFaces的<p:selectOneMenu>。檢查自定義內容示例在其3.0 showcase。

來源

2011-07-19 13:37:49 BalusC

'h：selectOneRadio'呢？我有一個要求，其中有3個選項，每個選項都有不同的顏色標籤。不能找到一種方式來與jsf中的無線電做到這一點。它似乎是在每個單元格中以''和一個匹配的''表格的形式呈現。看起來他們應該允許css樣式沿着與'h：panelGrid'相同的方向行進，但似乎沒有。你知道這個有什麼竅門嗎？ – Lucas

@Lucas：http://stackoverflow.com/questions/6033955/jsf-more-customizable-selectmanycheckbox-and-selectoneradio – BalusC

謝謝，這將工作，但我們目前沒有使用戰斧。我將不得不看到，如果這可以添加到我們的環境沒有負面後果（看起來像太多的框架是一件壞事）。無論如何，我發現一個hackish的方式來使用默認jsf： '' css： '.choices input [value =「yes」] + label {color：green} .choices input [value =「no」] +標籤{color：red}' – Lucas

將CSS應用於嵌套在<h：selectOneMenu>中的<f：selectItem>

回答

相關問題