html - 为什么Shinydashboard将数字输入的角从圆形更改为90度？

我有以下两个脚本创建一个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)

最佳答案

@MistaPrime是正确的，这是一个边界半径CSS问题。还有一点要注意的是，numericInput由.form-control设置样式，而selectInput由.selectizeInput设置样式，因此您需要同时修改两者。这是修改后的用户界面：

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

要实际回答有关为什么闪亮仪表板执行此操作的问题，我不确定，但这可能只是浏览器提供的默认行为。