如何在 Shiny 中为 selectInput 占位符提示着色？答案

【问题标题】：How to color selectInput placeholder prompt in Shiny?如何在 Shiny 中为 selectInput 占位符提示着色？
【发布时间】：2019-03-15 15:40:44
【问题描述】：

我想在SelectInput 框（Segment mIgration）中制作蓝色的“选择”提示，使其看起来与其他输入框相似但失败了。

这是我在 UI 部分使用的一段代码：

  column(width=2,
       selectInput(inputId = "SEG_MIG",
                   label = "Segment Migration",
                   choices =c("Choose"='', "ALL",
                              unique(sort(as.character(final_data$`SEG MIG`)))),
                   multiple = TRUE
                   ))

左侧两个输入框中的选定元素被这段代码染成蓝色

  tags$style(type='text/css', ".selectize-input { font-size: 16px; line-height: 16px; color: blue;} 
                           .selectize-dropdown { background: grey; color: white; font-size: 12px; line-height: 12px; }"),

我不确定我在这里错过了什么。任何建议将不胜感激。

【问题讨论】：

你想要所有的项目都是蓝色的，还是只有“选择”？
你好 Stephane，我想要所有的蓝色。

标签： css r shiny

【解决方案1】：

这是用于控制选项、项目和占位符样式的 CSS。

library(shiny)

css <- "
.selectize-dropdown-content .option {
  color: blue;
}
.selectize-input .item {
  color: red !important;
  background-color: yellow !important;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  column(width=2,
         selectInput(inputId = "SEG_MIG",
                     label = "Segment Migration",
                     choices = c("Choose"='', "ALL", "AAA", "BBB"),
                     multiple = TRUE
         )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

【讨论】：

谢谢@Stephane Laurent