Change look/shape of selectInput and numericInput boxes

3
votes

I'm trying to change the look of some of my Shiny UI elements to make them more in line with the aesthetics of the rest of a website.

Specifically, I'm looking for a way to remove the rounded edges of the selectInput boxes to make it look something like this:

Example of squared selectInput

Secondly, I was hoping to make a numericInput box that looks similar to the following:

Example of plus minus numericInput

Is there an easy way to do this? I'm pretty comfortable in R, but don't know a huge amount of css or html. I'd thought about flanking a numericInput with actionButton elements to use as plus/minus keys, but haven't figured out how to make them look like the above.

Are there any style attributes or javascript libraries I can incorporate to achieve either of these two things?

1
javascripthtmlcssrshiny
Can't really do anything without a minimal example. Rounded edges is almost certainly css border-radius, either setting that to 0 on the style or adding a css class with border-radius: 0 should fix that problem - ash
These are actually two questions. The first one already has an answer. Please, ask the two questions in separate posts. - Uwe

1 Answers

2
votes

As ash commented, for the first question, you can remove the rounding by setting the border-radius to 0px:

shinyApp(
  ui=fluidPage(
    tags$head(
      tags$style(".selectize-input {border-radius:0px}"),
      tags$style(".selectize-input.dropdown-active {border-radius:0px}"),
      tags$style(".selectize-dropdown {border-radius:0px}")),
    selectInput("select", "Select", 1:3)),
  server=function(input, output){})