Selectize Input style in Shiny (font color of selected items)

问题

so I'm new to CSS and Shiny and I reached to change the colors of the items through testing about their names. As we can see the item Banana will have a font color yellow, Kiwi green and Tomato red. But now what I wanna do is that I want to keep these font colors when I select the items

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)
})
}
)

So I tried this

.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;
                  }

But this isn't working, it still launches the app but it ignores the condition of data-value = ... , so maybe in .item we have to deal with another way the condition about which fruit is it.

Thx and have a good day !

EDIT : Ok I'm bad ^^ I found the solution we just have to do the same but instead of using selectize-dropdown, we use selectize-input and we condition through data-value = ... in it. Like this :

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

来源：https://stackoverflow.com/questions/38435428/selectize-input-style-in-shiny-font-color-of-selected-items

标签

css

Shiny