使 R shiny 中 selectInput 的第一个元素显示为粗体

Question

我希望将 selectInput 的第一个元素“1”设为粗体。请帮忙

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

您可以在 CSS

中使用伪元素

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

Answer 2

看看 shinyWidgets 包，它有很多很棒的功能 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 3

您可以按照 @Nitin Shinde 的建议在您闪亮的应用中添加样式，如下所示：

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)

输出将是这样的：

Answer 4

您可以使用下面的代码将每个 selectInput 嵌套在 div 中，其中 class = "test" 用于每个您希望第一项加粗的内容。

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)

您可以将 div 的 class 设置为您喜欢的任何值，只需确保相应地更改 CSS 的 .test 部分。

正在更新“//颜色：#ff0000；”到 "color:#ff0000;" 会将颜色更改为红色，只需将十六进制代码更新为您想要使用的任何颜色即可。

使 R shiny 中 selectInput 的第一个元素显示为粗体

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

css

r

shiny

shinydashboard