更改 R Shiny 小部件输入文本大小答案

【问题标题】：Change R Shiny widget input text size更改 R Shiny 小部件输入文本大小
【发布时间】：2016-10-03 17:32:56
【问题描述】：

所以我有 numInputs，我想更改实际出现在文本框中的数字的文本大小。

我将如何实现这一目标？

【问题讨论】：

您可以使用 CSS。例如在 HTML 中参见 stackoverflow.com/questions/10363674/…（您可以在 Shiny 中使用 tags$style 来包含 CSS）

标签： r shiny

【解决方案1】：

正如@warmoverflow 所说，最简单的方法是使用 CSS。下面是向小部件添加一些 CSS 的两个示例，第一个将仅应用于具有指定 id 的元素，第二个将应用于所有类型为 number 的元素。我假设它是 numericInput 而不是 numInputs，但它应该适用于任何其他输入小部件。

选项 1. 更改特定元素的 CSS

runApp(list(
  ui = shinyUI(fluidPage(
    tags$style("#myNumericInput {font-size:50px;height:50px;}"),
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100),
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100)
  )),
  server = shinyServer(function(input, output, session) {
  })
))

选项 2. 更改所有 number 类型元素的 CSS。

runApp(list(
  ui = shinyUI(fluidPage(
    tags$style("[type = 'number'] {font-size:50px;height:50px;}"),
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100),
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100)
  )),
  server = shinyServer(function(input, output, session) {
  })
))

请注意，除了更改字体大小，我还更改了高度，这是为了确保框足够大以显示不同大小的数字。

此外，您可以考虑使用单独的 .css 文件来放置所有自定义样式。

【讨论】：

【解决方案2】：

谢谢，我刚刚放了

input[type="number"] {
  font-size: 18px;
}

到我的 CSS 标题样式标签中，它起作用了。

【讨论】：

【解决方案3】：

只是一个一般性的注释，其他访问此帖子的人可能会感兴趣：

事实证明，如果您的 inputId 中包含 .，则 tags$style('#inputId {}') 方法不起作用。

例如：以下不会改变输入文本的文本大小：

tags$style("#myNumeric.Input {font-size:8px;}"),
numericInput("myNumeric.Input", "Observations:", 10, min = 1, max = 100)

...但以下内容按预期工作：

tags$style("#myNumericInput {font-size:8px;}"),
numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100)

注意：_ 在 inputId 名称中可以正常工作。

如果您坚持在您的 inputId 名称中保留 .，请尝试将样式参数直接添加到您的输入函数中：

    numericInput("myNumeric.Input", "Observations:", 10, min = 1, max = 100,
                 style = "font-size:8px;")

【讨论】：