How to change on hover background color in pickerInput?

Question

I need to change the background color with which the pickerInput highlights the on hover option. How can I achieve it?. Below is a minimal example, I have tried changing the style but I can't get it

library(shiny)

shinyApp(
        ui = basicPage(
                pickerInput("state", "State", split(state.name, state.division),
                        choicesOpt = list(style = rep(("hover {background: blue; color: black; font-weight: bold}"),100)))
        ),
        server = function(input, output) {}
)

As you can see in the example, the background of the on hover option is light gray and not blue.

Answer 1

Add the following code to your Shiny app UI to change the color of the hovering option in ShinyInput:

tags$style(".dropdown-item:hover {
         color: red;
         background-color: red !important;
         }")

Answer 2

You gotta use custom CSS. The style argument within choicesOpt in pickerInput isn't the right approach for this task, as it's meant for inline styles of individual choices, not for pseudo-classes like :hover.

library(shiny)
library(shinyWidgets)

shinyApp(
    ui = basicPage(
        tags$head(
            tags$style(HTML("
                .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
                    background-color: blue;
                    color: black;
                    font-weight: bold;
                }
            "))
        ),
        pickerInput(
            "state", 
            "State", 
            choices = split(state.name, state.division)
        )
    ),
    server = function(input, output) {}
)

This example should do the trick, best of luck!