Make the first element of a selectInput in R shiny appear bold

Question

I wish to make the first element "1" of the selectInput bold in color. Please help.

ui <- fluidPage(
selectInput(
"select",
label = h3("Select box"),
choices = c(1,2,3,4)
))
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)

Answer 1

Have a look at the shinyWidgets package which has a lot of cool features with its pickerInput

rm(list = ls())
library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  pickerInput(inputId = "Id069", 
              label = "Style individual options with HTML", 
              choices = c("steelblue 150%", 
                          "right align + red", "bold", 
                          "background color"), choicesOpt = list(style = c("color: steelblue; font-size: 150%;", 
                                                                           "color: firebrick; text-align: right;", 
                                                                           "font-weight: bold;", "background: forestgreen; color: white;")))

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

Answer 2

You can use pseudo elements in CSS

<style>
    option:first-child{
    font-weight:bold;
    color:#ff0000;
    }
</style>

Answer 3

You can add the style as suggested by @Nitin Shinde in your shiny app like this:

ui <- fluidPage(

  tags$head(tags$style(".option:first-child{
    font-weight:bold;
    //color:#ff0000;
  }")),
  selectInput(
    "select",
    label = h3("Select box"),
    choices = c(1,2,3,4)
  ))
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)

The output would be something like this:

Answer 4

You can use the below and nest each selectInput inside the div with class = "test" for every one you wish the first item to be bold in.

ui <- fluidPage(

  tags$head(tags$style(".test .option:first-child{
                       font-weight:bold;
                       //color:#ff0000;
                       }")),
  div(class = "test",selectInput(
    "select",
    label = h3("Select box"),
    choices = c(1,2,3,4)
  )),
  selectInput(
    "select2",
    label = h3("Select box"),
    choices = c(1,2,3,4)
  )

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

You can set the class of the div to whatever you like just be sure to change the .test part of the CSS accordingly.

Updating "//color:#ff0000;" to "color:#ff0000;" will change the colour to red, just update the hex code to whichever colour you would like to use.