how to customize SelectInput in Shiny (box height and width)

[AbhishekHP]

Please find the screenshot and reprex below
Let's keep the font as it is adoped but can we vary the drop-down box ? height and weight as indicated in the screenshot ?

How can we customize the height and width of the select Input ?

library(shiny)
shinyApp(
    ui = fluidPage(tags$style(type='text/css', ".selectize-input { font-size: 13px; line-height: 13px;} 
                 .selectize-dropdown { font-size: 13px; line-height: 13px; }
                 .form-group, .selectize-control {margin-bottom:-10px;max-height: 100px !important;}
                 .box-body {
          padding-bottom: 0px;
      }"),
        selectInput("state", "Choose a state:",
                    list(`East Coast` = list("NY", "NJ", "CT"),
                         `West Coast` = list("WA", "OR", "CA"),
                         `Midwest` = list("MN", "WI", "IA"))
        ),
        textOutput("result")
    ),
    server = function(input, output) {
        output$result <- renderText({
            paste("You chose", input$state)
        })
    }
)

[pieterjanvc]

Hi,

This is what I came up with:

library(shiny)

shinyApp(
  ui = fluidPage(
    
    tags$head(
      tags$style(HTML("

      .selectize-input {
        height: 50px;
        width: 600px;
        font-size: 24pt;
        padding-top: 5px;
      }

    "))
    ),
    
    selectInput("state", "Choose a state:",
                list(`East Coast` = list("NY", "NJ", "CT"),
                     `West Coast` = list("WA", "OR", "CA"),
                     `Midwest` = list("MN", "WI", "IA"))
    ),
    
    textOutput("result")
  ),
  server = function(input, output) {
    output$result <- renderText({
      paste("You chose", input$state)
    })
  }
)

An interesting related post is this one:

selectInput--CSS customization

This was a fun one! I went ahead and applied custom styling for <select>. Here's what it looks like. [33%20PM] The first thing I did was create a new r project and created a separate css file. I originally had it all in one file, but it was starting to become difficult to manage. At the end of this post, you can find a link to the project on github. ui.R The two things that I'd like to point out are the label and select elements. In the previous post, I mentioned that using tags$select might be a better option for adding custom styling. The structure to create the input using example provided ended up looking like this. # label tags$label("for"="state", "Select a State", class="input-l…

Good luck!
PJ