如何在R Shiny中设置单个selectInput菜单的样式？

Question

你可以将CSS样式应用于单个selectInput菜单吗？

我在其他文章中找到了处理样式selectInput菜单的代码,但结果影响了应用程序中的所有内容.我想操纵单个菜单.我也在考虑根据服务器中发生的条件向个别元素添加样式,但那是另一个单独的问题.

测试应用代码:

library(shiny)
library(shinydashboard)
library(shinyjs)
ui  <- 
  fluidPage(
  hr("how do we get the change the style elements of a single select input?) 
tags$style(type='text/css',  .selectize-input  { font-size: 8px; line-height: 8px;} 
             .selectize-dropdown { font-size: 8px; line-height: 8px; }"),

    selectInput("choice", "choices", c("A", "B", "C")),

    selectInput("choice2", "choices", c("D", "E", "F"))
     )

server < - function(input, output, session) {   }
})
shinyApp(ui = ui, server = server)

这种方法直接来自Dean Attali在这里的答案:例子,类似的问题被问为最终评论,但没有答案,所以我决定就此问题发表一个问题,因为我有同样的问题.

对于像textInput字段这样的其他元素,我通常这样做的方式是:

tags$style(type='text/css', "#NAMEELEMENT {background-color: green; height: 40px; border-color: #bfbfbf; width: 520px; position: relative;left: 3%}"), 

您可以通过#及其inputId将标记$ style附加到元素.

干杯.

Answer 1

我自己找到了答案。决心的结合，在谷歌和 Stackoverflow 上的大量时间以及我相信由 Dean Atali 创建的一些信息，但这似乎做到了：

  tags$head(tags$style(HTML('.selectize-input {white-space: nowrap}
    #choice+ div>.selectize-dropdown{width: 660px !important}
    #choices+ div>.selectize-dropdown{width: 300px !important}')))

Answer 2

将您的selectInput包装在div中:

tags$div(id='my_div',
         class='my_class',
         selectInput("choice",
                     "choices",
                      c("A", "B", "C"))),

然后你可以设置它的样式而不影响其他selectInput元素:

#my_div .selectize-dropdown-content > .option {
   background-color: grey;
}

要么

.my_class .selectize-dropdown-content > .option {
   background-color: grey;
}

与CSS一样,使用id命名和捕获单个元素,以及 class设置多个元素的样式.