Shiny DT: I am able to change the color of selected rows but whenever a user hovers over a selected row it changes to default color.

[DaveRosenman]

I am trying to control the color of selected rows in shiny. The simple example below does successfully make selected rows a pinkish color, but when I hover over a selected row it turns to the default blue color.

In the image below, I have selected the second row and have my mouse hovering over it so it's showing in the default blue color. How do I control that color? Also, getting rid of the blue coloring between consecutive pink lines like lines 6 and 7 would be nice! Thanks in advance for any help I can get on this

Here's the code I used:

library(shiny)
library(DT)

ui <- fluidPage(
  tags$head(tags$style(HTML(
    "
table.dataTable tbody tr:hover {
    background-color: #FFC0CB !important;
}


table.dataTable tbody tr.selected td, 
table.dataTable tbody td.selected {
    box-shadow: inset 0 0 0 9999px #FFC0CB !important;
}

table.dataTable tbody tr:active td {
    background-color: #FFC0CB !important;
}"
  ))
  ),
  DTOutput("mtcars")
)


server <- function(input, output, session) {
  output$mtcars <- DT::renderDataTable({mtcars})
}

shinyApp(ui, server)

[joesho112358]

Hi,

I think I have what you're looking for with the following:

table.dataTable tbody tr.selected td,
table.dataTable tbody td.selected {
    border-top-color: white !important;
    box-shadow: inset 0 0 0 9999px #FFC0CB !important;
}

table.dataTable tbody tr:active td {
    background-color: #FFC0CB !important;
}

:root {
    --dt-row-selected: transparent !important;
}

table.dataTable tbody tr:hover, table.dataTable tbody tr:hover td {
    background-color: #FFC0CB !important;
}

[DaveRosenman]

That worked! Thanks!