css - 如何在 R shiny selectizeInput 组标题中设置字体颜色？

Question

我想在我的 selectizeInput 的选项中为组名称着色。下拉列表中的“水果”一词应始终为橙色，而“年份”应为绿色。

我试过网上找到的方法，但不太明白。附件是改编自 Selectize Input style in Shiny (font color of selected items) 的 Shiny 应用程序示例.

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

Answer 1

解决方案

你很接近。将其用于 css:

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

(同样适用于您想要着色的任何其他组标题。)

为什么有效

这是为下拉菜单生成的 html 片段:

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

实际包含选项组标签的 div 具有类 optgroup-header。但它是具有消除歧义的 data-group 属性的上一级(optgroup 类)的 div。因此，我们需要指定，例如，optgroup div 的 optgroup-header 子级，其中 data-group 是 Fruit 应该有橙色文本。