Angular PrimeNG列表框十字标签

Question

I'm using angular 7.2.0 and primeng 7.0.0, i'm trying to show a list of elements in a listbox.

How can i cross the label of the selected element on the list instead of highlighting it

Answer 1

My advice would be to try and inspect the element you are trying to modify using the browser's DevTools (play in the Style section until you reach the desired result) and then change it in your code.

As for the question, you want to remove the background for the selected state of the list item and then give the line-through text-decoration property. This should be the CSS part to solve your issue with the right selectors:

body .ui-listbox .ui-listbox-list .ui-listbox-item.ui-state-highlight {
    color: #000000;
    text-decoration: line-through;
    background-color: none;
}

Please note that the text color is changed to be visible after we remove the blue background. This is only for the highlighted state of a list box item ( .ui-listbox-item.ui-state-highlight ).

• If you are not sure how to use the inspect tool, please check this quick tutorial provided by Google developers. Hope this can be of any help