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

问题

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)

回答1:

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:

回答2:

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)

回答3:

You can use pseudo elements in CSS

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

回答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.

来源：https://stackoverflow.com/questions/48499963/make-the-first-element-of-a-selectinput-in-r-shiny-appear-bold

标签

css

Shiny

shinydashboard