CODEWITHSUNDEEP
cssrshiny
mir
mir

Reputation: 37

How to set font color in R shiny selectizeInput group titles?

I want to color the group names in the choices of my selectizeInput. The word "Fruit" in the dropdown should always be orange, while "Year" should be green.

I've played around with approaches I found online, but couldn't quite figure it out. Attached is an example Shiny app adapted from Selectize Input style in Shiny (font color of selected items).

library(googleVis)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$style(HTML("

      .selectize-dropdown-content[data-value=\"Fruit\"]{

          color: orange !important;

      }

      .selectize-dropdown-content[data-value=\"Year\"]{

          color: blue !important;

      }

                  "))
    ), uiOutput("type")),

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

Upvotes: 1

Views: 607

Answers (1)

A. S. K.
A. S. K.

Reputation: 2816

Solution

You're close. Use this for the css:

.optgroup[data-group=\"Fruit\"] .optgroup-header {
    color: orange !important;
}

(And similarly for any other group headers you want to color.)

Why it works

Here's a snippet of the html generated for the dropdown:

<div class="selectize-dropdown-content">
    <div data-group="Fruit" class="optgroup">
        <div class="optgroup-header">Fruit</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div> 
   </div>
        <div data-group="Year" class="optgroup"><div class="optgroup-header">Year</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
...

The div that actually holds the option group label has the class optgroup-header. But it's the div one level up (of class optgroup) that has the disambiguating data-group attribute. So we need to specify, for example, that the optgroup-header child of the optgroup div where data-group is Fruit should have orange text.

Upvotes: 1

Related Questions