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

Question

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

假设我的用户界面中有：

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

我想指定的箱子A和C的选择应该充满蓝色和用于箱子B和D应充满红色。

Answer 1

我建议使用 CSS。有关如何使用 CSS 设置 Shiny 应用程序样式的更多信息，请参阅本文。

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

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