how to change the back ground color of the entire row in a data table when the check box is selected using css in jsp?

Question

The below is the jsp page code:

<p:column selectionMode="multiple" exportable="false" style="text-
align:center;">
</p:column>
  <p:ajax event="rowSelectCheckbox" update="deleteButton"/>
  <p:ajax event="rowUnselectCheckbox" update="deleteButton"/> 

And now the default background color is showing which blue, but I want to make it gray.

Answer 1

To achieve this, overwrite the default ui-state-highlight class that is applied to the row (tr element) once it is selected.

ui-datatable-selectable.ui-state-highlight{
    background-color: gray
}

Answer 2

Thank you all for your valuable answers.

I did overwrite "ui-state-highlight, ui-widget-content .ui-state-highlight, ui-widget-header .ui-state-highlight" CSS tag , And it did work .

<p:ajax event="rowSelectCheckbox" update="deleteEntry" 
rowClasses="ui-state-highlight, ui-widget-content .ui-state-highlight, ui-widget-header .ui-state-highlight" />