Question

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

我将如何实现这一目标？

Answer 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文件来放置所有自定义样式。

Answer 2

谢谢，我只是把

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

进入我的CSS标题样式标签，它工作。

Answer 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;")

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

3 个答案: