CODEWITHSUNDEEP
javascripthtmlcssrshiny
RareAquaticBadger
RareAquaticBadger

Reputation: 111

Change look/shape of selectInput and numericInput boxes

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?

Upvotes: 3

Views: 807

Answers (1)

HubertL
HubertL

Reputation: 19544

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){})

Upvotes: 2

Related Questions