【问题标题】：How to set font color in R shiny selectizeInput group titles?如何在 R 闪亮的 selectizeInput 组标题中设置字体颜色？
【发布时间】：2020-01-01 19:07:34
【问题描述】：

我想在我的 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)
    })
  }
)

【问题讨论】：

标签： css r shiny

【解决方案1】：

解决方案

你已经接近了。将此用于 css：

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

（对于您想要着色的任何其他组标题也是如此。）

为什么会起作用

这是为下拉菜单生成的 html 的 sn-p：

<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 应该有橙色文本。

【讨论】：