影响所有 selectInputs 的闪亮 selectInput CSS答案

【问题标题】：Shiny selectInput CSS affecting all selectInputs影响所有 selectInputs 的闪亮 selectInput CSS
【发布时间】：2018-08-24 09:37:40
【问题描述】：

我在 selectizeInput 上方有以下 css，以便所选项目交替着色以提高可读性。

tags$style(HTML(".item:nth-child(odd) {background: #F4F4F4 !important;
                                       width: 100% !important;}
                 .item:nth-child(even) {background: white !important;
                                        width: 100% !important;}"))

不幸的是，无论它们出现在仪表板上的哪个位置，它都会影响所有其他 selectizeInputs 和 selectInputs。

我怎样才能让上面的css只适用于一个selectizeInput。

谢谢

【问题讨论】：

使用 #id 将 CSS 分配给一个 id，其中 'id' 是输入的名称。
谢谢。我是 CSS 新手，所以...我添加了 #selectFilter.item:nth-child(odd)(...) 但没有效果，事实上我什至失去了自定义 - 我也添加了它。 selectFilter 是 selectizeInput() 的 ID。所以我一定是做错了什么
我认为selectize 的选择与selectInput 位于不同的div 中

标签： r shiny shinydashboard

【解决方案1】：

我认为让 CSS 选择正确的 <div> 是诀窍。下面是使用默认 Shiny 脚手架的可重现功能示例：

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

   # Application title
   titlePanel("Control CSS of Singl Selectize Input"),

   # Sidebar with a slider input for number of bins 
   sidebarLayout(
      sidebarPanel(
        tags$style(HTML("#bins+ .selectize-control.multi .selectize-input > .item:nth-child(odd) {background: #F4F4F4 ;
                                       width: 100% !important;}
                        #bins+ .selectize-control.multi .selectize-input > .item:nth-child(even) {background: white ;
                        width: 100% !important;}")),
         selectizeInput("bins",
                     "Number of bins:",
                     choices = c(1:50),
                     selected = 30,
                     multiple = TRUE),
        selectizeInput("newbins",
                       "Number of bins:",
                       choices = c(1:50),
                       selected = 30,
                       multiple = TRUE)
      ),

      # Show a plot of the generated distribution
      mainPanel(

      )
   )
)

# Define server logic required to draw a histogram
server <- function(input, output) {


}

# Run the application 
shinyApp(ui = ui, server = server)

CSS首先找到正确的id，然后使用class找到正确的div。更多关于 + 登录 CSS 的信息：https://www.w3schools.com/cssref/sel_element_pluss.asp

【讨论】：