title: How to change background color of hovered/highlighted item of <p:selectOneMenu>?
body: <p>How can I change the background color of hovered/highlighted item of <code>&lt;p:selectOneMenu&gt;</code>?</p>
  
  <p>I tried the following CSS selectors, but they did not have any effect.</p>
  
  <pre class="lang-css prettyprint-override"><code>.ui-selectonemenu-items :hover{
      background-color: #a9c6c9;
  }
  .ui-selectonemenu-label:hover {
      background-color: #a9c6c9;
  }
  </code></pre>
  
  <p>Here is the JSF code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p:selectOneMenu&gt;
      &lt;f:selectItem itemLabel="by id" itemValue="1" /&gt;
      &lt;f:selectItem itemLabel="by owner" itemValue="2" /&gt;
  &lt;/p:selectOneMenu&gt;
  </code></pre>
  
  <p>HTML output:</p>
  
  <pre><code>&lt;ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" style=""&gt;
       &lt;li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"&gt;Select Net&lt;/li&gt;
       &lt;li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all ui-state-highlight"&gt;TEST&lt;/li&gt;
       &lt;li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"&gt;TEST1&lt;/li&gt;
       &lt;li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all"&gt;TEST2&lt;/li&gt;
  </code></pre>