selectInput Text Coloring

[Amber James]

I am attempting to provide shiny with a set of values with unique coloring for selectInput. Unfortunately, though, I have yet to find any type of documentation to use for reference. Is this possible? I have attempted this a couple dozen ways using css and html but I am not very good with either language so I may be just coding it wrong. (My problem is probably the later of the two.) 

CSS example

 selectInput("annotateColor", "Annotations", c("black", "blue",  "Matching"))),

 tags$style(type='text/css', "#annotateColor select option:nth-child(1) { color:black; }"),

 tags$style(type='text/css', "#annotateColor select option:nth-child(2){ color: white; }"),

 tags$style(type='text/css', "#annotateColor select option:nth-child(3) { color:orange; }")

This is adjusted from the answer on stackoverflow : http://stackoverflow.com/questions/5677350/html-dropdown-list-item-baground-colors 

HTML example 

selectInput("annotateColor", "Annotations", c(

             HTML("<font color='black'>black</font>") , 

             HTML("<font color='white'>blue</font>") , 

             HTML("<font color='orange'>Matching</font>") , 

))

Ideally this would just be a small list of multi-colored text the user can pick a single option from. I am mainly doing this because the main users who will be utilizing my application do not speak English. Having a visual for them to recognize with the drop down would be extremely useful. 

Thank you for your help and time,

Amber

[Dean Attali]

It's not something I've ever done, but it can be achieved with some weird CSS.

The reason your attempt doesn't work is because the select box that you're seeing when using selectInput is not actually a <select> tag. It uses a JavaScript plugin called selectize.  Here's an example of what you want 

appCSS <- 

"#color ~ .selectize-control.single .selectize-dropdown [data-value=blue] { color: blue }

 #color ~ .selectize-control.single .selectize-dropdown [data-value=red] { color: red }"

runApp(shinyApp(

  ui = fluidPage(

    tags$head(tags$style(HTML(appCSS))),

    selectInput("color", "Color", c("blue", "red"))

  ),

  server = function(input, output, session) {

  }

))

Note that the CSS selector is a bit complicated - it's finding the `color` element and then looks for the selectize element that is its sibling, and then it looks at the dropdown options and for each colour value is uses that colour.  Also note that this won't change the colour of the selected option, only the colours in the dropdown.

[Amber James]

This is perfect. Thank you so much for the help, it was exactly what I was looking for! :D