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

您可以将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)

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

---

干杯

我自己找到了答案。结合了决心，在谷歌和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}')))

---

将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;
}

或

---

与CSS一样，使用

id

命名和捕获单个元素，使用

class

设置多个元素的样式。

谢谢，非常有用

我用一个有效的例子总结了你的答案：

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('
    .selectize-input {white-space: nowrap}
    #input1+ div>.selectize-dropdown{width: 660px !important; font-style: italic; font-weight: bold; color: green;}
    #input1+ div>.selectize-input{width: 660px !important; font-style: italic; font-weight: bold; color: green; margin-bottom: -10px;}
    #input2+ div>.selectize-dropdown{width: 300px !important; color: red;}
    #input2+ div>.selectize-input{width: 300px !important; color: red; margin-bottom: 0px;}
                            '))),

  selectizeInput("input1", "label1", c("A", "B", "C")),
  selectizeInput("input2", "label2", c("D", "E", "F"))
)

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

库（闪亮）
也许这会有帮助。请注意，
.js-irs-0
是滑块1，
.js-irs-1
是滑块2，所以我实际上在滑块中使用了这个答案。这是可行的，但有一个令人讨厌的缺点。如果我以后在应用程序的前面添加另一个滑块，我想我必须对所有.js-irs-0.irs single.js-irs-0元素进行补偿。也就是说，容易出错！这段时间并没有白费，它帮了我很多忙：-）看起来这可能是做这件事的“正确”方法，但如果我只想在一个输入中添加样式，我通常的做法是将样式直接放入div中。这看起来像
div（selectInput（…），style=“background color:grey；”）
。如果您只想修改一个输入，则似乎可以正常工作。
.my_class .selectize-dropdown-content > .option {
   background-color: grey;
}

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('
    .selectize-input {white-space: nowrap}
    #input1+ div>.selectize-dropdown{width: 660px !important; font-style: italic; font-weight: bold; color: green;}
    #input1+ div>.selectize-input{width: 660px !important; font-style: italic; font-weight: bold; color: green; margin-bottom: -10px;}
    #input2+ div>.selectize-dropdown{width: 300px !important; color: red;}
    #input2+ div>.selectize-input{width: 300px !important; color: red; margin-bottom: 0px;}
                            '))),

  selectizeInput("input1", "label1", c("A", "B", "C")),
  selectizeInput("input2", "label2", c("D", "E", "F"))
)

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