r - 在 R Shiny 中为 selectInput 中的选项着色

Question

我有一个 Shiny 的应用程序，在 UI 中有一个 selectInput。

假设我的 UI 中有:

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

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

Answer 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 类/li>
• .option 表示我们需要上述标签的子标签，并且这些子标签必须具有类 option
• 最后，:nth-child(odd) 和 :nth-child(even) 让我们控制样式将应用于哪些子标签，在哪里odd 选择第一个、第三个和第五个(等等) child ，even 选择第二个、第四个和第六个(等等) child 。

综上所述，这是演示应用程序。

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 并调整背景颜色。