change default background color of selected element tree

Question

Help me please change default background color of selected element in tree.

The xhtml code is

    <style type="text/css">
        .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight
        {
            background-color: green;
        }
    </style>
    <h:head>
    </h:head>
    <h:body>
        <h:form id="mainform">
            <h:panelGrid columns="4" layout="grid">
                <p:outputPanel style="width: 100%; height: 400px">
                    <div id="mainTableDiv">
                        <p:tree id="tree1" value="#{treeDNDView.root1}" var="node" selectionMode="single"
                                selection="#{treeDNDView.selectedNode1}"
                                draggable="true" droppable="true" dragdropScope="demo" scrollable="true"
                                scrollHeight="630" widgetVar="tree1">
                            <p:treeNode>
                                <h:outputText value="#{node}"/>
                            </p:treeNode>
                        </p:tree>
                    </div>
                </p:outputPanel>
......

The result of inspection is:

The color of selected items is grey, but I need a green.

Possible duplicate of [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) — Jasper de Vries, Mar 14 '18 at 13:04
Don't use `!important`. Instead create a more specific CSS rule. — Jasper de Vries, Mar 14 '18 at 13:05
I would add to @JasperdeVries, if you add `!important`, you won't be able to override the style attribute for any dom element which has the class/id that has `!important`, so be careful. Only add if the class is more specific for eg: `.green{color: green !important;}` or `.blue{color: blue !important;}` — Aniket Sahrawat, Mar 14 '18 at 13:09

score 0 · Answer 1 · answered Mar 14 '18 at 14:16

Added

.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight**, .ui-tree**

and

<p:tree id="tree1" value="#{treeDNDView.root1}" var="node" selectionMode="single"
                                selection="#{treeDNDView.selectedNode1}"
                                draggable="true" droppable="true" dragdropScope="demo" scrollable="true"
                                scrollHeight="630" widgetVar="tree1" **styleClass="ui-tree"**>
                            <p:treeNode>
                                <h:outputText value="#{node}"/>
                            </p:treeNode>
                        </p:tree>

And eliminate !important.

change default background color of selected element tree

1 Answers1