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 (asking about the solution rather than the problem). — Julia
– Julia, Commented Feb 3, 2022 at 16:27
@Julia I already solved the problem. I really just wanted the question/answer out there for the community. — neuron
– neuron, Commented Feb 3, 2022 at 16:30

neuron · Accepted Answer · 2022-02-03 16:26:04Z

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; }

Collectives™ on Stack Overflow

Removing up/down arrows from numericInput() R Shiny

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related