is it possible to have a SelectInput that does not have a dropdown arrow?

Question

new to using Rshiny. My question mainly considers the look of the drop down bars. There's 2 dataframes, one has car data and the other shows distances. And the drop down bars depend on what has been chosen before it.

I was wondering if I could make the "cost" and "distance in miles" selectinputs just look like normal box without the drop down arrow?

Sorry if this has already been answered, perhaps my googling skills aren't the best yet for coding stuff! From looking around, I see that using multiple = TRUE gets rid of this arrow but that means the person has to select it which I don't want, it should just show up automatically after they've chosen the previous boxes.

Second thought was to use some sort of textoutput instead but i think then I'd lose the nice formatting of the box and subheading, and now i'm out of ideas. And I am not sure how i'd link this if its not a selectinput....So does anyone have a suggestion for this problem?

image of what I have so far, the red x's showing I do not want drop down arrow

My code:

library(shiny)

Df <- data.frame(Manufacturer= c(rep("ford", 4)), 
                                    Model= c(rep("esport",2), rep("fiesta",2)), 
                    transmission= c(1,2,3,4), cost=c(2,4,6,8))

Distance1 <- data.frame(Origin= c("leeds", "London", "Glasgow"), 
                        Destination = c("Bristol", "Cardiff", "London"),
                        Distance= c(12,13,14))

ui <- fluidPage(
  fluidRow(
    column(4, wellPanel(
      selectInput("Select1", "Choose your Manufacturer", sort(Df$Manufacturer),
                  unique(Df$Manufacturer)),
      selectizeInput("Select2", "Choose your Model", sort(Df$Model), 
                     options= list(
                       placeholder = '',
                       onInitialize = I('function() { this.setValue(""); }'))),
      selectizeInput("Select3", "Choose transmission", sort(Df$transmission),
                     options= list(
                       placeholder = '',
                       onInitialize = I('function() { this.setValue(""); }'))),
      selectInput("Select4", "cost", choices= NULL),
      selectizeInput("Select5", "Choose Origin", sort(Distance1$Origin),
                     options= list(
                       placeholder = '',
                       onInitialize = I('function() { this.setValue(""); }'))),
      selectizeInput("Select6", "Choose Destination", sort(Distance1$Distance),
                     options= list(
                       placeholder = '',
                       onInitialize = I('function() { this.setValue(""); }'))),
      selectInput("Select7", "Distance in Miles", choices= NULL),
      textOutput("total1")

    ))))

server <- function(input, output,session) {
  observeEvent(input$Select1,{
    updateSelectInput(session,'Select2',
                      choices=unique(Df$Model[Df$Manufacturer==input$Select1]))
  }) 

  observeEvent(input$Select2,{
    updateSelectInput(session,'Select3',
                      choices=unique(Df$transmission[Df$Manufacturer==input$Select1 & 
                                                         Df$Model==input$Select2]))
  }) 

  observeEvent(input$Select3,{
    updateSelectInput(session,'Select4',
                      choices=unique(Df$cost[Df$Manufacturer==input$Select1 & 
                                                       Df$Model==input$Select2 & 
                                                       Df$transmission==input$Select3]))

  }) 

observeEvent(input$Select5,{
  updateSelectInput(session,'Select6',
                    choices=unique(Distance1$Destination[Distance1$Origin==input$Select5]))
})

  observeEvent(input$Select6,{
    updateSelectInput(session,'Select7',
                      choices=unique(Distance1$Distance[Distance1$Origin==input$Select5 & 
                                                          Distance1$Destination==input$Select6]))
  })

output$total1 <- renderText({as.numeric(input$Select4) * as.numeric(input$Select7)}) 
    }


shinyApp( ui= ui, server= server)

bretauv · Accepted Answer · 2020-04-03T17:12:21.860

You can do this with CSS. I used the answer here as a basis. The argument content concerns the arrow (by the way, the answer I related to also shows how to change the style of the arrow). Also, since you don't want to apply this change to all selectizeInputs, you need to wrap the selectizeInputs you want to change into a tags$div and specify #div_id in the HTML part:

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML(
"        #div_id .selectize-control.single .selectize-input:after{
          content: none;
        }"
      )
    )
  ),
  tags$div(id = "div_id", 
           selectizeInput("foo", "foo", names(mtcars))),  
  selectizeInput("foo_2", "foo 2", names(mtcars)),
  tags$div(id = "div_id", 
           selectizeInput("foo_3", "foo_3", names(iris)))
)

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

}

shinyApp(ui, server)

is it possible to have a SelectInput that does not have a dropdown arrow?

1 Answers1