所以我是CSS和Shiny的新手,我通过测试他们的名字来改变项目的颜色 . 正如我们所看到的,Banana项目的字体颜色为黄色,Kiwi绿色和番茄红色 . 但现在我想做的是,当我选择项目时,我想保留这些字体颜色

shinyApp(
 ui = fluidPage(
  tags$head(
   tags$style(HTML("
                 .item {
                  background: #2196f3 !important;
                  color: red !important;
                  }
                  .selectize-dropdown-content .active {
                  background: #2196f5 !important;
                  color: white !important;
                  }
                  .selectize-dropdown [data-value=\"Tomato\"] { 
                  color: red }
                  .selectize-dropdown [data-value=\"Kiwi\"] { 
                  color: green }
                  .selectize-dropdown [data-value=\"Banana\"] { 
                  color: yellow }
                  "))
  ),uiOutput("type")),

server = function(input, output, session) {
output$type <- renderUI({
  selectInput("color", "Color",as.list(fruits),multiple = T)
})
}
)

所以我尝试了这个

.item [data-value=\"Banana\"]{
                  background: #2196f3 !important;
                  color: yellow !important;
                  }
.item [data-value=\"Tomato\"]{
                  background: #2196f3 !important;
                  color: red !important;
                  }
.item [data-value=\"Kiwi\"]{
                  background: #2196f3 !important;
                  color: green !important;
                  }

但这不起作用,它仍然启动应用程序,但它忽略了 data-value = ... 的条件,所以也许在 .item 中我们必须以另一种方式处理关于它的果实的条件 .

谢谢你,祝你有个美好的一天!

EDIT : 好的我很糟糕^^我发现我们必须做同样的解决方案,但我们使用 selectize-input 而不是使用 selectize-input ,我们通过 data-value = ... 来调整它 . 像这样 :

.selectize-input[data-value=\"Tomato\"] { 
                  color: red }
.selectize-input[data-value=\"Kiwi\"] { 
                  color: green }
.selectize-input[data-value=\"Banana\"] { 
                  color: yellow !important}