Primefaces remove specify ui-icon

Question

In my Primefaces, I'm using menubar. In menu right side triangle icon is not necessary so I want to remove it. I try it on CSS

   .submenu .ui-icon-triangle-1-s{
        display: none;
    }

But it will affect entire page other components (i.e selectOneMenu) but I need remove triangle icon in submenu. I try below Code:

 <h:form>
    ...
    <p:menubar>
       <p:submenu label="File">
          <p:menuitem value="Open"/>
          ...
       </p:submenu>
    </p:menbar>
    .....
    <p:selectOneMenu id="User">
       .....
    </p:selectOneMenu>
 </h:form>

Learn css by trying, failing bumping your head and in the mean time gather knowledge: http://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors http://stackoverflow.com/questions/2809024/points-in-css-specificity http://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity — Kukeltje, May 09 '15 at 08:12
And where does the `.submenu` come from? I knowhere see you setting that class and I doubt PF sets it. And if so there is no selectonemenu beneath it. So improve your example, look at the generated xhtml take the steps mentioned above with a browser developertool at hand — Kukeltje, May 09 '15 at 08:16

Aleksandr Erokhin · Answer 1 · 2015-05-10T15:38:35.443

Your approach seems to be right. Using css descendant selector of the form:

.calss1 .class2 {
    /* style */
}

causes style to be applied to all components with css class2 that also have parent component with css class1. Setting styleClass to "submenu" for a submenu would hide triangle icon for that submenu in you example.

<p:submenu label="File" icon="ui-icon-document">
    <p:submenu label="New" icon="ui-icon-contact" styleClass="submenu">
        <p:menuitem value="Project" url="#" />
        <p:menuitem value="Other" url="#" />
    </p:submenu>
</p:submenu>

Primefaces remove specify ui-icon

1 Answers1