Question

我在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。

由于

Answer 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，然后在使用类的下方找到正确的div。有关CSS中+号的更多信息：https://www.w3schools.com/cssref/sel_element_pluss.asp

闪亮的selectInput CSS影响所有selectInputs

1 个答案: