Search code examples
jquery-uijqgrid

Selected row background color

I'm using jqgrid with jquery-ui 'smoothness' theme, unfortunately with this theme the selected row background color is too light, I'm trying to change the background color to make it more visible. I've tried changing ui-state-highlight in css (with !important override) but this does not work. Is there a CSS way to do this or perhaps a jqgrid custom formatter is the way to go?

Solution

  • The class ui-state-highlight uses the background CSS attribute. So a small trick is to use background instead of background-color to remove the background image. For example

    .ui-state-highlight { background: yellow !important; }

    see live here.

    UPDATED: It's not necessary to use !important. It's enough to specify a more specific rule like

    .ui-jqgrid-btable .ui-state-highlight { background: yellow; }

    or

    .ui-jqgrid .ui-state-highlight { background: yellow; }