在 R Shiny 中为 selectInput 中的选项着色答案

【问题标题】：Coloring the options in a selectInput in R Shiny在 R Shiny 中为 selectInput 中的选项着色
【发布时间】：2017-12-02 01:45:18
【问题描述】：

我有一个闪亮的应用程序，在 UI 中带有 selectInput。

假设我的 UI 中有：

selectInput("my_select_input", "Select Letter", c("A", B", "C", "D"))

我想指定A 和 C 选项的框应填充为蓝色，B 和 D 的框应填充为红色。

【问题讨论】：

如果您提供一些最小的 reproducible example 并运行代码来创建 selectInput，那么提供帮助会更容易。
考虑在 javascript 中执行此操作 - 您可以将自定义 javascript 传递给您的应用程序。
如果您能帮助我了解如何执行此操作，我将不胜感激。

标签： r colors shiny

【解决方案1】：

我会推荐使用 CSS。有关如何使用 CSS 设置 Shiny 应用程序样式的更多信息，请参阅this article。

我已经包含了一个包含 CSS 作为字符串的演示应用程序。在实践中，我会将 CSS 样式存储在一个单独的文件中，请参阅上面链接的文章。如果您不熟悉 CSS，我将简要总结使用的选择器，更多关于 CSS 选择器here。

CSS 选择器总结，

#my_select_input 查找 ID 为 my_select_input 的标签
~ .selectize-control 表示我们实际上想要 #my_select_input 的兄弟标签，并且该兄弟必须具有 selectize-control 类
.option 表示我们想要上述标签的子标签，并且这些子标签必须具有 option 类
最后，:nth-child(odd) 和 :nth-child(even) 让我们控制样式将应用于哪个子标签，其中odd 选择第一个、第三个和第五个（等等）子标签，even 选择第二、第四和第六（等）孩子。

说了这么多，下面是演示应用程序。

library(shiny)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$style("
        #my_select_input ~ .selectize-control .option:nth-child(odd) {
          background-color: rgba(30,144,255,0.5);

        }

        #my_select_input ~ .selectize-control .option:nth-child(even) {
          background-color: rgba(205,92,92,0.5);
        }
        "
      )
    ),
    selectInput(
      inputId = "my_select_input",
      label = "Select Letter", 
      choices = c("A", "B", "C", "D")
    )
  ),
  server = function(input, output) {

  }
)

如果您想将红色/蓝色着色应用于应用程序中的所有选择输入，您可以删除 #my_select_input ~ 前缀。如果您想将此样式的变体应用于不同的选择输入，您可以更改 my_select_input 并调整背景颜色。

【讨论】：