css styling for select and numeric Input

Question

I am using R shiny and i am trying to set the same heigth for selectInput and numericInput in my ui. I found this line:

 tags$style(type="text/css", ".selectize-input {line-height: 20px;}"),

which changes the heigth for all my selectInputs.

Is there any similar line to numericInput?

Thanks

Answer 1

Well, it does not have a specific class such as selectInput. But you can still get the same result using the more general class form-control. We need to use height instead of line-height though, which will work fine for selectInput anyway.

ui <- fluidPage(
  tags$style(type = "text/css", ".form-control.shiny-bound-input, 
.selectize-input {height: 70px;}"),
  selectInput(inputId = "another_id",
              label = "bar",
              choices = c(1, 2)),
  numericInput(inputId = "some_id",
              label = "foo",
              value = 1)
)

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

shinyApp(ui, server)

EDIT:

In case you want to apply some CSS to a specific input, you need to use its id, so the style does not apply to all elements sharing the same class. In the example above, if you only want to change the height of the numericInput whose id is some_id, you would use #some_id to select this element, leading to the following code:

tags$style(type = "text/css", 
           "#some_id.form-control.shiny-bound-input {height: 70px;}")