我想在shinydashboard
中为框使用自定义颜色。下面的css可以做到这一点,但当我有collapsible = TRUE
时,它看起来不一致:
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style(HTML("
.box.box-solid.box-success>.box-header {
color:#2071B5;
background:#ABD7E9
}
.box.box-solid.box-success{
border-bottom-color:#ABD7E9;
border-left-color:#ABD7E9;
border-right-color:#ABD7E9;
border-top-color:#ABD7E9;
background:#ABD7E9
}
")),
box(
title = "Shiny Box",
status = "success",
solidHeader = TRUE,
collapsible = TRUE,
collapsed = TRUE,
tags$head(tags$style(HTML("div#inline label { width: 52%; }
div#inline input { display: inline-block; width: 68%;}"))),
tags$head(
tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; }
#inline .form-group { display: table-row;}")),
div(id="inline", style="width:35vw;",
div(HTML("<b>TEST </b>")),
br(),
numericInputIcon("A", h5("test1"), value = 20, icon = icon("percent")) ,
numericInputIcon("B", h5("test2"), value = 40, icon = icon("percent")) ,
numericInputIcon("C", h5("test3"), value = 60, icon = icon("percent")) ,
currencyInput("X", "Total", value = 0.3, format = "percentageUS2dec")
)
)
)
),
server = function(input, output) { }
)
添加以下CSS也没有帮助:
.box.box-solid.box-success>.box-header>.box-tools.pull-right {
color:#2071B5;
background:#ABD7E9
}
我想有所有的背景色为#ABD7E9
包括numericinput
的背景!
1条答案
按热度按时间fkaflof61#
由于父div(类
box
)的bg颜色为#ABD7E9
,我们可以简单地将类form-control
和类input-group-addon
的元素的bg颜色设置为transparent
,以获得整个框一致的bg颜色。