Question

我在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会查找标识为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并调整背景颜色。

在R Shiny

1 个答案: