更改noSelectionOption选项的样式

Question

我想更改noSelectionOption的样式，以使其更明显地是一个占位符。

我的测试页包含：

<p:selectOneMenu id="region" value="#{codeTableFirstEntryTest.region}" class="ddh-dropdown" converter="#{regionConverter}">
    <f:selectItem itemLabel="No item selected" itemValue="" noSelectionOption="true" />
    <f:selectItems value="#{codeTableFirstEntryTest.getAllData()}"  var="region" itemLabel="#{region.description}" itemValue="#{region}"/>
</p:selectOneMenu>

我能够在下拉菜单中更改样式（在选项中为绿色）

使用

div.ui-selectonemenu-items-wrapper>ul>li:first-child {
    font-style: italic;
}

但是当标签（红色部分）中选择了“未选择任何项目”时，我发现无法更改样式（本例中为斜体）。

jQuery解决方案

我找到了jQuery解决方法，但我正在寻找更智能的东西。

<script>
    function applyStyle() {
        $('.ui-selectonemenu>label').each(function() {
            if ($(this).html() == "No item selected") {
                $(this).addClass("my-empty");
            } else {
                $(this).removeClass("my-empty");
            }
        });
    }
</script>

<p:selectOneMenu id="region" value="#{codeTableFirstEntryTest.region}" class="my-dropdown" converter="#{regionConverter}" onchange="applyStyle()">
    <f:selectItem itemLabel="No item selected" itemValue="" noSelectionOption="true" />
    <f:selectItems value="#{codeTableFirstEntryTest.getAllData()}"  var="region" itemLabel="#{region.description}" itemValue="#{region}"/>
</p:selectOneMenu>

<script>
    jQuery(document).ready(function() {
        applyStyle();
    });
</script>

请参见onchange="applyStyle()" ...

PrimeFaces为selectOneMenu生成的代码是

<div id="region" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all my-dropdown" role="combobox" aria-haspopup="true" aria-expanded="true" aria-owns="region_items" style="min-width: 203px;">
    <div class="ui-helper-hidden-accessible">
        <input id="region_focus" name="region_focus" type="text" autocomplete="off" aria-expanded="true" aria-autocomplete="list" aria-activedescendant="region_0" aria-describedby="region_0" aria-disabled="false">
    </div>
    <div class="ui-helper-hidden-accessible">
        <select id="region_input" name="region_input" tabindex="-1" aria-hidden="true" onchange="applyStyle()">
            <option value="">No item selected</option>
            <option value="1000000">EURO - Europe</option>
            <option value="1000001">ASPAC - Asia/Pacific</option>
        </select>
    </div>
    <label id="region_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all my-empty">No item selected</label>
    <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s ui-c"/>
    </div>
</div>

我想为该标签应用样式（我的空类来自于我的解决方法）...