Selectize Input style in Shiny (font color of selected items)
<p>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    </p>

<pre><code>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 &lt;- renderUI({
  selectInput("color", "Color",as.list(fruits),multiple = T)
})
}
)
</code></pre>

<p>So I tried this</p>

<pre><code>.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;
                  }
</code></pre>

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

<p>Thx and have a good day !</p>

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

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