如何更改pickerInput元素的容器颜色？

Question

当我使用左边缘向左移动pickerInput元素时，出现了一个空白，我无法获得与页面其余部分相同的颜色。

我尝试了css配置的许多变体，但都不起作用

library(shinyWidgets)
library(shiny)

ui <- fluidPage(
  tags$style(
    HTML(
      "

body{
 background-color: grey;
}


          button, select {
          margin-left: 90px;
          background-color: darkgrey;
        }



  ")
  ),





  fluidRow(
    pickerInput(
      inputId = "select1",
      label = "pickerInput",
      choices = c(3, 4, 8, 5, 2, 6, 7),
      options = list(title = "Please Select Desired Number")
    )
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

背景应与页面的其余部分一样为灰色

Answer 1

将pickerInput封装在div标记中应该更好。

ui <- fluidPage(
    tags$head(tags$style("body{background:grey}")),
    fluidRow(
        tags$div(
            style = "margin-left:90px",
            pickerInput(
                inputId = "select1",
                label = "pickerInput",
                choices = c(3, 4, 8, 5, 2, 6, 7),
                options = list(title = "Please Select Desired Number")
            )
        )
    )
)

如果您需要将此样式应用于多个pickerInput，最好使用div标记来包装pickerInput，并使用类作为CSS选择器。

ui <- fluidPage(
    tags$head(
        tags$style(
            "body{
                background:grey;
            }
            .ident-picker {
                margin-left:90px;
            }"
        )
    ),
    fluidRow(
        tags$div(
            class = "ident-picker",
            pickerInput(
                inputId = "select1",
                label = "pickerInput",
                choices = c(3, 4, 8, 5, 2, 6, 7),
                options = list(title = "Please Select Desired Number")
            )
        )
    ),
    fluidRow(
        tags$div(
            class = "ident-picker",
            pickerInput(
                inputId = "select2",
                label = "pickerInput2",
                choices = letters,
                options = list(title = "Please Select Desired characters")
            )
        )
    )

)

​

​

此外，您还可以在现有UI函数上编写包装函数

library(shiny)
library(rlang)

actionButtonPretty <- function(inputId, label){
    actionButton(inputId, label, style="color: white; background-color:#003c69; border-color: #003c69; ")
}

ui <- fluidPage(
    actionButtonPretty("button1","Pretty Button 1"),
    actionButtonPretty("button2","Pretty Button 2")
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

​

​