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

【问题标题】：How to style an single individual selectInput menu in R Shiny?如何在 R Shiny 中设置单个 selectInput 菜单的样式？
【发布时间】：2017-10-24 20:16:05
【问题描述】：

您可以将 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 在这里的回答：examp, 并提出了一个类似的问题作为最终评论，但没有答案，所以我决定就此事发布一个问题，因为我有同样的问题。

对于文本输入字段等其他元素，我通常这样做的方式是：

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

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

干杯。

【问题讨论】：

也许这会帮助stackoverflow.com/questions/36906265/…。注意.js-irs-0 是滑块 1，.js-irs-1 是滑块 2，依此类推
我实际上将这个答案用于我的滑块。它有效，但有一个讨厌的缺点。如果我稍后在应用程序中添加另一个滑块，我想我必须为所有 .js-irs-0 .irs-single 和 .js-irs-0 元素提供报酬。 IE。容易出错！

标签： css r select shiny styles

【解决方案1】：

谢谢你，非常有用！

我在一个工作示例中总结了你的答案：

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)

【讨论】：

【解决方案2】：

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

【讨论】：

这段时间没有白费，对我帮助很大:-)

【解决方案3】：

将您的 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 设置多个元素的样式。

【讨论】：

看起来这可能是执行此操作的“正确”方式，但如果我只想将样式添加到一个输入，我通常这样做的方式是将样式直接放入 div。这看起来像div(selectInput(...), style = "background-color: grey;")。如果您只想修改一个输入，似乎可以正常工作。