html - 为什么 shinydashboard 将 numericInput 的角从圆形更改为 90 度？

Question

我有以下两个脚本创建一个numericInput和一个selectInput字段。一个在shiny，另一个在shinydashboard。我还创建了指向这两个示例的 shinyapps.io 链接。

我的问题是为什么shinydashboard将角更改numericInput为 90 度？请看截图。在示例 1 中，两个输入字段都有圆角。

但是，在示例 2 中，角numericInput变成 90 度。

如果有人可以帮助我理解这种行为并开发一种方法来使所有的角落都变成圆形或 90 度，那就太好了。

示例 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)

示例 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)

标签： htmlcssrshinyshinydashboard

Answer 1

看起来它是引导程序的 CSS，它为角半径添加了 4px 的值。要删除它，请将其添加到您的 CSS 中：

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

或者，您可以将 4px 边框半径添加到您的其他站点：

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