Why shinydashboard changes the corner of a numericInput from round to 90 degree?

问题

I have the following two scripts creating one numericInput and one selectInput fields. One is in shiny, and the other is in shinydashboard. I also created shinyapps.io link to these two examples.

My question is why shinydashboard changes the corner of the numericInput to be 90 degrees? Please see the screenshots. In example 1, both input fields have round corners.

However, in example 2, the corner of the numericInput becomes 90 degrees.

It would be great if someone can help me understand this behavior and develop a way to make all the corners either round or 90 degrees.

Example 1 (https://yuchenw.shinyapps.io/Corner_Input_Example1/)

# Load the packages
library(shiny)

# User Interface
ui <- fluidPage(
  numericInput(inputId = "Number", label = "A numericInput with round corner", value = NA),
  selectInput(inputId = "Select", label = "A selectInput with round corner", choices = 1:3)
)

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

# Run the app
shinyApp(ui, server)

Example 2 (https://yuchenw.shinyapps.io/Corner_Input_Example2/)

# Load the packages
library(shiny)
library(shinydashboard)

# User Interface
ui <- dashboardPage(
    header = dashboardHeader(title = ""),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem(
          text = "Example",
          tabName = "tab1"
        )
      )
    ),
    body = dashboardBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          numericInput(inputId = "Number", label = "A numericInput with 90-degree corner", value = NA),
          selectInput(inputId = "Select", label = "A selectInput with round corner", choices = 1:3)
        )
      )
    )
  )

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

# Run the app
shinyApp(ui, server)

回答1:

@MistaPrime is correct that this is a border-radius CSS issue. One more thing to note is that numericInput is styled by .form-control, while selectInput is styled by .selectizeInput, so you will need to modify both. Here's the modified UI:

ui <- fluidPage(

    tags$head(
        tags$style(
            HTML(
                "
                .form-control {
                    border-radius: 0px 0px 0px 0px;
                }

                .selectize-input {
                    border-radius: 0px 0px 0px 0px;
                }
                "
            )
        )
    ),

  numericInput(inputId = "Number", label = "A numericInput with round corner", value = NA),
  selectInput(inputId = "Select", label = "A selectInput with round corner", choices = 1:3)
)

To actually answer your question as to why shinydashboard does this--I'm not sure, but it might just be the default behaviour provided by the browser.

回答2:

It looks like it is bootstrap's CSS which adds a value of 4px to the corner radius. To remove that add this to your CSS:

.form-control {
    border-radius: 0px;
}

Alternatively you can add 4px border radius to your other site:

.form-control {
    border-radius: 4px;
}

来源：https://stackoverflow.com/questions/58293603/why-shinydashboard-changes-the-corner-of-a-numericinput-from-round-to-90-degree

标签

html

css

Shiny

shinydashboard