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

我想在selectizeInput的选择中为组名上色。下拉菜单中的“水果”一词应始终为橙色，而“年份”应为绿色。

我已经尝试了在网上找到的方法，但是还不太清楚。随附的是一个示例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)
    })
  }
)

最佳答案

解

你近了将此用于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。但是，具有明确的optgroup属性的是div上一层（类data-group）。因此，例如，我们需要指定optgroup-header是optgroup的data-group div的Fruit子级应具有橙色文本。

关于css - 如何在R Shiny selectizeInput组标题中设置字体颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57694362/