CODEWITHSUNDEEP
javascriptrshiny
firmo23
firmo23

Reputation: 8404

Use javascript to change the backround color of selectinput in R shiny

I have a simple shiny app in which I want tochange the background color of my selectInput() from white to orange using javascript. Is it possible? Where should I put the callback argument?

#ui.r
library(shiny)
ui <- fluidPage(


  theme=shinytheme("slate") ,
  # App title ----
  titlePanel(uiOutput("title")),

  #This hides the temporary warning messages while the plots are being created
  tags$style(type="text/css",
             ".shiny-output-error { visibility: hidden; }",
             ".shiny-output-error:before { visibility: hidden; }"
  ),


  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    uiOutput("menu"),



    # Main panel for displaying outputs ----
    mainPanel(

    )
  )
)
#server.r
server = function(input, output) {


  output$menu<-renderUI({

    sidebarPanel(width = 2,
                 selectInput("sel","",
                             choices = c("Home","About","Sector A","Sector B","Sector C"),
                             selected = "Home"),
                 tags$style(
                   "select#sel {background: #FFA500}"
                 )



    )
  })


}

Upvotes: 0

Views: 392

Answers (2)

Thomas
Thomas

Reputation: 1302

Based on your edited question you might use a div container around selectInput

div(
 selectInput("sel","",
   choices = c("Home","About","Sector A","Sector B","Sector C"),
   selected = "Home"),
 style = "background: #FFA500"
)

Or, if you want to style the entire sidebarPanel, style form.well

sidebarPanel(
  width = 2,
  selectInput(
    "sel","",
    choices = c("Home","About","Sector A","Sector B","Sector C"),
    selected = "Home"),
  tags$style(
    "form.well {background: #FFA500}"
  )
)

Upvotes: 1

MKa
MKa

Reputation: 2318

It should work if you put selectize = FALSE.

By default selectInput has selectize = TRUE which uses selectize.js.

So if you run your code as is then you should see your select is showing up as display: none enter image description here

So your output$menu will be something like

  output$menu<-renderUI({

    sidebarPanel(width = 2,
                 selectInput("sel","",
                             choices = c("Home","About","Sector A","Sector B","Sector C"),
                             selected = "Home", selectize = FALSE),
                 tags$style(
                   "select#sel {background: #FFA500}"
                 )
    )
  })

Upvotes: 1

Related Questions