CODEWITHSUNDEEP
rshiny
awunderground
awunderground

Reputation: 134

focus: none doesn't work for selectInput in R Shiny

I want to turn focus off for selectInput() in an R Shiny application using CSS.

enter image description here

Shouldn't the following declaration in the .selectize-input.focus selector accomplish this?

.selectize-input.focus { focus: none; }

For now, I'm just using this. The box is still focused, but it's clearish instead of blue.

.selectize-input.focus { border-color: rgba(0, 0, 0, 0); }

Thank you!

Upvotes: 0

Views: 575

Answers (2)

user2391020
user2391020

Reputation: 19

The problem is that the selectize stylesheet uses the .selectize-input.focus selector istelf. Add the parent element to your selector to overrule the default stylesheet:

.selectize-control > .selectize-input.focus {
  border-color: white;
  box-shadow:none;
}

Upvotes: 0

HubertL
HubertL

Reputation: 19544

To remove the blue highlighting around focused SelectInput, you can use this style:

shinyApp(fluidPage(
            tags$head(
              tags$style(HTML(".selectize-input.focus {
                                  border-color: #cccccc;
                                  -webkit-box-shadow: none;
                                  box-shadow: none;
                              }"))
            ),
            selectInput("input1", "input1", c("1","2"),"1")), 
         server=function(input, output){})

You will find several answers there : How come I can't remove the blue textarea border in Twitter Bootstrap?

Upvotes: 2

Related Questions