How to change the styling of a specific Shiny widget

Question

I want to style a shiny input from dqshiny package in my Shiny app as below -

library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
  ui = fluidPage(
    autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
  ),
  server = function(input, output, session) {

  }
)

I want to 2 things to achieve -

1. Want to change the highlight color in the suggestion field from yellowish to green
2. Also want to change the distance between the input field and the suggestion container with let say 10px.

I have a few other Widgets in my App, so above modified styling should not impact other widgets.

Is there any way to achieve this?

Any pointer will be highly appreciated.

Answer 1

Easiest way is just adding the CSS directly into the header. There's a really useful article about styling Shiny apps here.

library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
    ui = fluidPage(
        tags$head(
            tags$style(
                HTML(
                '
                .autocomplete-items div:hover {
                    background-color: green;
                }
                #auto1autocomplete-list {
                    margin-top: 10px;
                }
                '
                )
            )
        ),
        autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
    ),
  server = function(input, output, session) {
  }
)