css - R Shiny 更改 dateRangeInput 小部件的大小和格式

Question

在我的 Shiny 应用程序中，我有一个看起来像这样的 dateRangeInput 小部件。

1) 我想增加框中日期的大小，并将文本从粗体 更改为正常。

2) 另外，我想增加小部件标题和小部件输入之间的空间，以增加 (wellPanel) 的高度。我可以使用 width 函数控制宽度，但似乎无法修改它的高度。

我不是 CSS 专家，所以我很难修改它。

这是我在 ui.R 中的尝试，似乎没有用。

column(wellPanel(
tags$style(type='text/css', ".selectize-input { font-size: 20px; line-height: 24px;}"),
dateRangeInput("inp_pg1daterange", 
               label = paste('Date range selection'),
               start = min(results_combined$Date),
               end = max(results_combined$Date), 
               separator = " - ", 
               weekstart = 1

)

任何帮助将不胜感激!

Answer 1

我使用了 dateRangeInput 的示例代码。要触及的两个 css 元素。

更新了代码以增加小部件和标题之间的差距:

if (interactive()) {

  ui <- fluidPage(

    tags$title('This is my page'),

    tags$style('.input-sm {font-size: 16px; } label {font-weight: 500; margin-bottom: 15px; }'),

    dateRangeInput("daterange1", "Date range:",
                   start = "2001-01-01",
                   end   = "2010-12-31"),

    # Default start and end is the current date in the client's time zone
    dateRangeInput("daterange2", "Date range:"),

    # start and end are always specified in yyyy-mm-dd, even if the display
    # format is different
    dateRangeInput("daterange3", "Date range:",
                   start  = "2001-01-01",
                   end    = "2010-12-31",
                   min    = "2001-01-01",
                   max    = "2012-12-21",
                   format = "mm/dd/yy",
                   separator = " - "),

    # Pass in Date objects
    dateRangeInput("daterange4", "Date range:",
                   start = Sys.Date()-10,
                   end = Sys.Date()+10),

    # Use different language and different first day of week
    dateRangeInput("daterange5", "Date range:",
                   language = "de",
                   weekstart = 1),

    # Start with decade view instead of default month view
    dateRangeInput("daterange6", "Date range:",
                   startview = "decade")
  )

  shinyApp(ui, server = function(input, output) { })
}