Как скрыть/удалить серые границы tabBox в блестящем R с помощью CSS

У меня есть блестящее приложение с 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) {
  }
)

Как скрыть/удалить серые границы tabBox в блестящем R с помощью CSS

Я хотел бы скрыть/удалить серые линии границ tabBox со всех сторон, как показано стрелками на картинке.

Может ли кто-нибудь помочь, какой класс CSS должен использоваться для внесения этого изменения?

код добавлен.

chas 22.03.2022 12:22
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете установить 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) {}
)

result

Другие вопросы по теме