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 -

Want to change the highlight color in the suggestion field from yellowish to green
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.

What do you mean by highlight color in the suggestion field? There's nothing that is yellowish — heds1, Apr 06 '20 at 06:34
When you type something in the box, you will get few suggestions in the suggestion box. Now if you hover your mouse over those suggestions, then individual fields will be highlighted with a yellowish background color — Bogaso, Apr 06 '20 at 06:37
Gotcha. And by changing the distance between input field and suggestion container, do you mean pushing the dropdown options down a bit? — heds1, Apr 06 '20 at 06:42

score 2 · Accepted Answer · answered Apr 06 '20 at 06:45

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) {
  }
)

Where can I get the class and ids of corresponding DOM element e.g. #auto1autocomplete-list? — Bogaso, Apr 06 '20 at 07:45

How to change the styling of a specific Shiny widget

1 Answers1