How can I delete the highlight color for nodes

Question

I have an PrimeNg Tree (Angular 2) and I want to delete the selected nodes highlight color.

Based on the image I want to delete the blue highlight color.

Instead I want to get this style: Style I want

Here are my styles:

.ui-tree {
  width: 100%;
}

body .ui-widget-content {
  border: none !important;
}

span.ui-treenode-label {
  font-family: Poppins !important;
  line-height: 24px !important;
  font-size: 14px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

span.ui-treenode-icon {
  line-height: 24px !important;
  font-size: 1.2rem !important;
}

.ui-tree .ui-chkbox .ui-chkbox-icon {
  margin-left: 0px;
}

.ui-tree .ui-treenode-children {
  padding-left: 20px !important;
}

.hidden-tree-node {
  display: none;
}

.ui-state-highlight .ui-widget-content {
  color: white;
}

score 2 · Accepted Answer · answered Feb 04 '19 at 01:23

2

You can override the original style by setting:

span.ui-state-highlight {
    background-color: transparent !important;
    color: inherit !important;
}

answered Feb 04 '19 at 01:23

caiovisk

3,667
1
12
18

I would not say never... It's not always bad to use !important. But you must know where to use it. And in most cases it's better to avoid it with some well planned CSS. But as he is overriding an existing CSS with a deep selector, I can't see a bad practice to use it in this case. – caiovisk Feb 04 '19 at 07:08
https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css https://stackoverflow.com/questions/5701149/when-to-use-the-important-property-in-css – Patricio Vargas Feb 04 '19 at 07:19
That's worked for me!, thanks! Do you know how Can I change the folder color? – José Polanco Feb 04 '19 at 15:14

score 1 · Answer 2 · answered Feb 04 '19 at 06:48

1

A few solutions:

1) Use ng-deep

::ng-deep {
  span.ui-state-highlight {
    background-color: transparent;
    color: inherit;
  }
}

2)Target the element in a more specific way

span.ui-treenode-label.ui-corner-all.ui-state-highlight {
   background-color: transparent;
   color: inherit;
}

Also, try to use SASS. It will make your CSS more readable and smarter. You will love it. By the way you should remove the importance from your code. using importants is not good practice.

answered Feb 04 '19 at 06:48

Patricio Vargas

5,236
11
49
100

1

+1 - this solution allows the user to avoid using the CSS important rule. This is rarely a good idea. See: https://uxengineer.com/css-specificity-avoid-important-css/ – tracyak13 Nov 19 '19 at 01:01

How can I delete the highlight color for nodes

2 Answers2