2
votes

It seems that this question applies to all shiny UI Inputs.

Specifically, I am trying to find a way to format selectInput. For example, how could I change the blue color which highlights the selection and the light blue shadow surrounding the box when selectInput is active.

The problem I am facing is that I am trying to format my shiny application via a css file which has a completely different colorset and that does not sit very well with the standard blue of all UI Inputs.

1

1 Answers

3
votes

You can change the various attributes with CSS:

library(shiny)
runApp(list(
  ui = bootstrapPage(
    selectInput("variable", "Variable:",
                c("Cylinders" = "cyl",
                  "Transmission" = "am",
                  "Gears" = "gear")),
    tags$head(
      tags$style(HTML(".selectize-input.input-active, .selectize-input.input-active:hover, .selectize-control.multi .selectize-input.focus {border-color: red !important;}
                      .selectize-dropdown .active {background: yellow !important;}"))
    )
  ),
  server = function(input, output) {
  }
))

enter image description here