How to create a separate individual selectInput menu in R Shiny?

Can you apply css style to single selectInput menu?

I found the code in other articles that deal with the selectInput style, but the result affects all of them in the application. I would just like to manipulate individual menus. I am also considering adding style to individual elements based on conventions occurring on the server, but for another separate issue.

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

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

for other elements such as textInput field, as usual I do this:

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

$style # inputId.

.

+4
2

. , google Stackoverflow .. , , Dean Atali, , , , :

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

selectInput div:

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

, selectInput:

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

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

CSS, id , class - .

+3

Source: https://habr.com/ru/post/1677852/


All Articles