Почему shinydashboard меняет угол числового ввода с круглого на 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)

Answer 1

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

Чтобы на самом деле ответить на ваш вопрос о том, почему Shinydashboard это делает - я не уверен, но этоможет быть просто поведением по умолчанию, предоставляемым браузером.

Answer 2

Похоже, это CSS начальной загрузки, который добавляет значение 4px к радиусу угла. Чтобы удалить это, добавьте это в свой CSS:

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

В качестве альтернативы вы можете добавить радиус границы 4 пикселя на ваш другой сайт:

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