更改R Shiny中selectizeInput选项的颜色 [英] change colour of selectizeInput options in R Shiny

问题描述

我想更改Shiny应用程序中 selectizeInput 菜单中每个选项的颜色。在下面的示例代码中，我可以将所有菜单选项的颜色更改为蓝色，但是如何为每个单独的选项更改颜色？例如使 a为红色， b为蓝色， c为绿色等。

非常感谢！

  shinyApp（
 ui = 
 ShinyUI（fluidPage（
 tags $ head（
 tags $ style（HTML （ 
 .item {
背景：＃2196f3！important； 
颜色：白色！important; 
} 
 .selectize-dropdown-content .active {
背景：＃2196f3！important； 
颜色：白色！important; 
} 
））
），
 sidebarLayout（
 sidebarPanel（
 selectizeInput（ select，label = NULL，
 choices = c（ a， b， c， d），
 selected = c（ a，  b， c， d），
多个= TRUE，options = list（placeholder = Wybierz））），
 mainPanel（））
）
），
服务器=函数（输入，输出）{} 
）
  

 > sessionInfo（）
 R版本3.6.3（2020-02-29）
平台：x86_64-apple-darwin15.6.0（64位）
运行于：macOS High Sierra 10.13.6 
 
矩阵产品：默认
 BLAS：/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib 
 LAPACK：/Library/Frameworks/R.framework/Versions/3.6/Resources/lib/libRlapack.dylib 
 
语言环境：
 [1] en_GB.UTF-8 / en_GB.UTF-8 /en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8 
 
附加基本软件包：
 [1] stats4并行stats图形grDevices utils数据集方法
 [9]基本
 
其他附加程序包：
 [1] rsconnect_0.8.16 Shinythemes_1.1.2 dplyr_0.8.5 Shiny_1.4.0.2 
 [5] BiocParallel_1.20.1 MLInterfaces_1。 66.5 cluster_2.1.0 annotate_1.64.0 
 [9] XML_3.99-0.3 AnnotationDbi_1.48.0 IRanges_2.20.2 MSnbase_2.12.0 
 [13] ProtGenerics_1.18.0 S4Vectors_0.24.4 mzR _2.20.0 Rcpp_1.0.4.6 
 [17] Biobase_2.46.0 BiocGenerics_0.32.0 
  

解决方案

用上面建议的代码替换我的代码，更改了下拉菜单的颜色，但不菜单中的各个项目：

  
 ShinyApp（
 ui = 
 ShinyUI（fluidPage（
 tags $ head（
 tags $ style（HTML（ 
 .option [data-value = a] {
背景：red！important; 
颜色：白色！重要； 
} 
 .option [data-value = b] {
背景：绿色！important; 
颜色：白色！重要； 
} 
））
），
 sidebarLayout（
 sidebarPanel（
 selectizeInput（ select，label = NULL，
 choices = c（ a， b），选择的
 = c（ a， b），
 Multiple = TRUE，options = list（placeholder = Wybierz）））），
 mainPanel（））
）
），
服务器=函数（输入，输出）{} 
）
  

这会导致菜单和下拉菜单都带有颜色。

I would like to change the colour of each individual option of the selectizeInput menu in my Shiny app. In the following example code below I am able to change the colour to blue for all the menu options but how can I change it for each individual option? e.g. make "a" red, "b" blue, "c" green etc.

Thanks very much!

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
     .item {
       background: #2196f3 !important;
       color: white !important;
     }
     .selectize-dropdown-content .active {
       background: #2196f3 !important;
       color: white !important;
     }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b", "c", "d"),
                         selected = c("a", "b", "c", "d"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

> sessionInfo()
R version 3.6.3 (2020-02-29)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.6/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats4    parallel  stats     graphics  grDevices utils     datasets  methods  
[9] base     

other attached packages:
 [1] rsconnect_0.8.16     shinythemes_1.1.2    dplyr_0.8.5          shiny_1.4.0.2       
 [5] BiocParallel_1.20.1  MLInterfaces_1.66.5  cluster_2.1.0        annotate_1.64.0     
 [9] XML_3.99-0.3         AnnotationDbi_1.48.0 IRanges_2.20.2       MSnbase_2.12.0      
[13] ProtGenerics_1.18.0  S4Vectors_0.24.4     mzR_2.20.0           Rcpp_1.0.4.6        
[17] Biobase_2.46.0       BiocGenerics_0.32.0 

解决方案

Replacing my code with the above suggested code changed the drop down menu colour but NOT the individual items in the menu:

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a] {
          background: red !important;
          color: white !important;
        }
        .option[data-value=b] {
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

SOLUTION In order to achieve both items colour coded and the drop down. I needed to add .item to my code

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a], .item[data-value=a]{
          background: red !important;
          color: white !important;
        }
        .option[data-value=b], .item[data-value=b]{
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

This results in both the menu and drop down menu being coloured.

这篇关于更改R Shiny中selectizeInput选项的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！