How to style an single individual selectInput menu in R Shiny?

Question

Can you apply css style to a single selectInput menu?

I've found code in other articles that deal with styling selectInput menu's but the outcome affects all of them in the app. I would like to just manipulate individual menus. I'm also considering adding style to individual elements based on conditionals happening in the server, but that's for another separate question.

test app code:

library(shiny)
library(shinydashboard)
library(shinyjs)
ui  <- 
  fluidPage(
  hr("how do we get the change the style elements of a single select input?) 
tags$style(type='text/css',  .selectize-input  { font-size: 8px; line-height: 8px;} 
             .selectize-dropdown { font-size: 8px; line-height: 8px; }"),

    selectInput("choice", "choices", c("A", "B", "C")),

    selectInput("choice2", "choices", c("D", "E", "F"))
     )

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

This approach comes straight from Dean Attali's answer here: examp, and a similar question is asked as final comment, but no answer, so I decided to post a question on the matter since I have the same problem.

for other elements likea textInput field, the way I usually do this is by this:

tags$style(type='text/css', "#NAMEELEMENT {background-color: green; height: 40px; border-color: #bfbfbf; width: 520px; position: relative;left: 3%}"),

where you can attach the tag$style to an element by # and its inputId.

Cheers.

Maybe this will help https://stackoverflow.com/questions/36906265/how-to-color-sliderbar-sliderinput-in-r-shiny/36908030#36908030. Note that `.js-irs-0` is slider 1, `.js-irs-1` is slider 2 and so on — Pork Chop, May 24 '17 at 14:08
I actually used that answer for my sliders. It works, but there is one nasty drawback. If I later add another slider earlier in the app, I suppose I have to remunerate all the .js-irs-0 .irs-single, .js-irs-0 elements. I.e. prone to errors! — Mark, May 24 '17 at 14:50

Mark · Accepted Answer · 2018-02-02T16:15:39.990

10

I found the answer myself. Combination of determination, lots of hours on google and Stackoverflow etc with some info I found created by Dean Atali I believe, but this seems to do it:

  tags$head(tags$style(HTML('.selectize-input {white-space: nowrap}
    #choice+ div>.selectize-dropdown{width: 660px !important}
    #choices+ div>.selectize-dropdown{width: 300px !important}')))

edited Feb 02 '18 at 16:15

answered May 24 '17 at 20:35

Mark

2,789
1
26
66

1

didn"t spend this time in vain, it helped me a lot :-) – agenis Dec 11 '17 at 12:58

score 8 · Answer 2 · answered Nov 14 '17 at 17:49

8

Wrap your selectInput in a div:

tags$div(id='my_div',
         class='my_class',
         selectInput("choice",
                     "choices",
                      c("A", "B", "C"))),

Then you can style it without affecting other selectInput elements:

#my_div .selectize-dropdown-content > .option {
   background-color: grey;
}

or

.my_class .selectize-dropdown-content > .option {
   background-color: grey;
}

As always with CSS, use id to name and to catch a single element, and class to style multiple elements.

answered Nov 14 '17 at 17:49

Alpi Murányi

1,117
10
17

It seems like this is probably the "proper" way to do this, but the way I typically do it if I just want to add style to one input is to put the style directly into the div. This looks like `div(selectInput(...), style = "background-color: grey;")`. Seems to work fine if there is only one input which you want to modify. – jamesguy0121 Aug 01 '19 at 14:56

ismirsehregal · Answer 3 · 2018-09-26T12:42:11.030

Thanks for this, very useful!

I wrapped up your answer in a working example:

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('
    .selectize-input {white-space: nowrap}
    #input1+ div>.selectize-dropdown{width: 660px !important; font-style: italic; font-weight: bold; color: green;}
    #input1+ div>.selectize-input{width: 660px !important; font-style: italic; font-weight: bold; color: green; margin-bottom: -10px;}
    #input2+ div>.selectize-dropdown{width: 300px !important; color: red;}
    #input2+ div>.selectize-input{width: 300px !important; color: red; margin-bottom: 0px;}
                            '))),

  selectizeInput("input1", "label1", c("A", "B", "C")),
  selectizeInput("input2", "label2", c("D", "E", "F"))
)

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

How to style an single individual selectInput menu in R Shiny?

3 Answers3

Linked