简体   繁体   中英

Shiny selectInput label CSS

I'm creating white divs with blue headers, but when I put a selectInput inside a div the header I want blue is the selectInput label.

在此处输入图片说明

How do I edit the code below that I'm using to create my blocks so that the TO_BLUE box has the same styling as the BLUE block?

library(shiny)

# I have two blocks BLUE and TO_BLUE
blocks <- c("BLUE", "TO_BLUE")

BLOCK <- function(data, name)
{
  # create a white div with rounded edges
  # the title of the div will have a blue background
  div(style = "
      text-align: center;
      font-size: 12px;
      background-color: white;
      border-radius: 10px;
      color: black;
      margin-bottom: 15px;
      min-height: 55px;
      ",
      id = name,

      if (name == "BLUE") {
        # this div gives the "BLUE" block it's blue background
        div(style = "background-color: #0c283b;
            color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            min-width: 70px;",
            name)
      } else {
        # but how do I get the TITLE within the selectInput to be blue like the block above?
        selectInput(name, "TO_BLUE", choices = c("1", "2", "3", selectize = FALSE))
      }

  )
}

ui <- fluidPage(


   sidebarLayout(
      sidebarPanel(
        lapply(blocks, BLOCK, data = blocks)
      ),

      mainPanel()
   )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

using shinyjs I added

inlineCSS(".control-label { 
            background-color: #0c283b; 
            width: 100%; 
            color: white;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            }")

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM