Removing up/down arrows from numericInput() R Shiny

Question

I am interested in removing or hiding the side arrows that appear when you use numericInput() with shiny. I will attach an image of the arrows that I am referring to so everyone can understand which part I would like to remove/hide. After reading the documentation, it does not appear that there is an option to remove these arrows. So I am wondering if there is a way to use CSS to remove these arrows. I did see one other post that asked a similar question. However, I am only interested in using numericInput().

I will attach some sample code. The code essentially does nothing but it will give you a reproducible example.

library(shiny)
server <- function(input, output){
}

ui <- fluidPage(


  titlePanel("Test1"),
  
  sidebarLayout(
    
    sidebarPanel(
      
      numericInput("n", 
                   label = h4("Test2"),
                   min=1,
                   value = 20),
      
      numericInput("x", 
                   label = h4("Test3"),
                   min=0,
                   value = 10),
      
      h4(textOutput("pvalue"))
    ),
    
    mainPanel(
      plotOutput("nullplot")
    )
  )
)

shinyApp(ui = ui, server = server)
runApp()

WARNING: I have read online that the side arrows do not show up on all web browsers and some versions of RStudio. See here

But why? I smell a potential [XY problem](https://meta.stackexchange.com/q/66377) (asking about the solution rather than the problem). — Julia, Feb 03 '22 at 16:27
@Julia I already solved the problem. I really just wanted the question/answer out there for the community. — neuron, Feb 03 '22 at 16:30

score 3 · Accepted Answer · answered Feb 03 '22 at 16:26

It does not appear that there is a way to remove the arrows from a numericInput(), however, there is a way to hide them. Just to be clear there is a difference between removing and hiding. Removing the arrows, in theory, should completely remove the code for the arrows. Hiding the arrows will simply mask the code for the side arrows, however, the code will still be present but will not be seen by the user unless they inspect the page.

Below is CSS that can be used to hide the side arrows from numericInput().

tags$head(
  tags$style(HTML("
        input[type=number] {
              -moz-appearance:textfield;
        }
        input[type=number]::{
              -moz-appearance:textfield;
        }
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
              -webkit-appearance: none;
              margin: 0;
        }
    "))
)

If you wanted to apply this code to the example given in the question, then you could do something like this

library(shiny)
server <- function(input, output){
}
ui <- fluidPage(
  titlePanel("Test1"),
  sidebarLayout(
    sidebarPanel( 
      tags$head(
        tags$style(HTML("
        input[type=number] {
              -moz-appearance:textfield;
        }
        input[type=number]::{
              -moz-appearance:textfield;
        }
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
              -webkit-appearance: none;
              margin: 0;
        }
    "))
      ),
      numericInput("n", 
                   label = h4("Test2"),
                   min=1,
                   value = 20),
      numericInput("x", 
                   label = h4("Test3"),
                   min=0,
                   value = 10),
      h4(textOutput("pvalue"))
    ),
    mainPanel(
      plotOutput("nullplot")
    )
  )
)

shinyApp(ui = ui, server = server)
runApp()

Overall this is just a workaround because there is no option to remove the side arrows.

Worked for me just using the first `input[type=number] { -moz-appearance:textfield; }` — bruce.moran, May 30 '22 at 12:27

Removing up/down arrows from numericInput() R Shiny

1 Answers1