CODEWITHSUNDEEP
cssshiny
thmschk
thmschk

Reputation: 644

Change color of border shadow in selectizeInput of shiny app

I have a shiny app with selectizeInput, here is an example: 

library(shiny)
ui <- fluidPage(
  theme = "bootstrap.css", # load css-settings
  br(),
  selectizeInput('in1', 'Options', c(Choose='', state.name))
)

server <- function(input, output,session) {}

shinyApp(ui = ui, server = server)

In my bootstrap.css file (placed in folder www) I added the folowing

   .selectize-input.focus {
                                  border-color: #cccccc;
                                  -webkit-box-shadow: none;
                                  box-shadow: none;
                                  outline: none;
                              }

to remove the blue shadow around the selectizeInput box. However, nothing happens... Does anyone know help?

Upvotes: 2

Views: 1454

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

On Shiny there is the following class:

.selectize-input.focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

So to remove the shadow you can use the following:

.selectize-input.focus {
    border-color:#66afe9;
    outline: 0;
    -webkit-box-shadow:none !important;
    box-shadow:none !important;
}

Make also sure the CSS is included after the CSS of Shiny.

Upvotes: 5

Related Questions