css 更改选择的颜色R Shiny中的输入选项

vmpqdwk3 于 2023-01-10 发布在其他

关注(0)|答案(3)|浏览(226)

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

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

css

来源：https://stackoverflow.com/questions/61339878/change-colour-of-selectizeinput-options-in-r-shiny

3条答案

按热度按时间

pokxtpni1#

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

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

解决方案为了实现项目颜色编码和下拉。我需要添加.item到我的代码

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

第一节第二节第一节第三节第一节
这会导致菜单和下拉菜单都被着色。

赞(0）回复(0）举报 2023-01-10

thtygnil2#

您可以：

.option[data-value=a] {
  background: red !important;
  color: white !important;
}
.option[data-value=b] {
  background: green !important;
  color: white !important;
}
.option[data-value=c] {
  background: blue !important;
  color: white !important;
}
.option[data-value=d] {
  background: magenta !important;
  color: white !important;
}

赞(0）回复(0）举报 2023-01-10

6jjcrrmo3#

更灵活的方法。不用在css中为a和b编码颜色。

library(shiny)
library(stringi)

t1 <- tibble(choices = stringi::stri_rand_strings(200, 5), 
             group = stri_rand_strings(200, 1, pattern = "[AB]")) %>%
  mutate(html=ifelse(group=='A',paste0("<span style='color:red';>",choices,"</span>"),
                     paste0("<span style='color:blue';>",choices,"</span>")
  ))

items <- setNames(t1$choices, t1$html)

runApp(shinyApp(
  
  ui = fluidPage(
    
    
    selectizeInput("id", "Label", choices = items, multiple = TRUE,
                   options = list(render = I("
  {
    item: function(item, escape) { return '<div>' + item.label + '</div>'; },
    option: function(item, escape) { return '<div>' + item.label + '</div>'; }
  }"))) 
    
  ),
  
  server = function(input, output, session) {
    
  }
  
))

从https://community.rstudio.com/t/selectinput-conditional-formatting/81563/2复制

赞(0）回复(0）举报 2023-01-10

我来回答

css 更改选择的颜色R Shiny中的输入选项

3条答案

相关问题

热门标签

最新问答