如何使用 CSS hide/remove 闪亮 R 中的 tabBox 灰色边框

Question

我有一个带有 tabBox 的闪亮应用程序，如下所示：

library(shiny)
library(shinydashboard)
body <- dashboardBody(
  fluidRow(tags$style(".nav-tabs {
                      background-color: #006747;
                      }
                      
                      .nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
                      background-color: transparent;
                      border-color: transparent;
                      }
                      
                      .nav-tabs-custom .nav-tabs li.active {
                      border-top-color: #990d5e;
                      }
                      
                      .content-wrapper {
                       background-color: #FFF;
                      }"),
                tabBox(
                  title = "First tabBox",
                  # The id lets us use input$tabset1 on the server to find the current tab
                  id = "tabset1", height = "250px",
                  tabPanel("Tab1", "First tab content"),
                  tabPanel("Tab2", "Tab content 2")
  )
  
  ))

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "tabBoxes"),
    dashboardSidebar(),
    body
  ),
  server = function(input, output) {
  }
)

我想hide/remove如图中箭头所示tabBox四面的灰色边框线。

有人可以帮忙 CSS class 必须用来进行此更改吗？

Answer 1

您可以为 class 设置 box-shadow: none; .nav-tabs-custom:

library(shiny)
library(shinydashboard)
body <- dashboardBody(
  fluidRow(tags$style(".nav-tabs {
                      background-color: #006747;
                      }
                      
                      .nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
                      background-color: transparent;
                      border-color: transparent;
                      }
                      
                      .nav-tabs-custom .nav-tabs li.active {
                      border-top-color: #990d5e;
                      }
                      
                      .content-wrapper {
                       background-color: #FFF;
                      }
                      .nav-tabs-custom {
                          box-shadow: none;
                      }
                      "),
           tabBox(
             title = "First tabBox",
             # The id lets us use input$tabset1 on the server to find the current tab
             id = "tabset1", height = "250px",
             tabPanel("Tab1", "First tab content"),
             tabPanel("Tab2", "Tab content 2")
           )
           
  ))

shinyApp(
  ui = dashboardPage(
    dashboardHeader(title = "tabBoxes"),
    dashboardSidebar(),
    body
  ),
  server = function(input, output) {}
)

如何使用 CSS hide/remove 闪亮 R 中的 tabBox 灰色边框

How to hide/remove tabBox grey borders in shiny R using CSS

css

r

shiny

shinydashboard