选择和数字输入的 css 样式

Question

我正在使用 R shiny 并尝试在我的用户界面中为 selectInput 和 numericInput 设置相同的高度。我找到了这一行:

 tags$style(type="text/css", ".selectize-input {line-height: 20px;}"),

它改变了我所有 selectInputs 的高度。

有没有和numericInput类似的行？

谢谢

Answer 1

嗯，它没有特定的类，例如 selectInput。但是您仍然可以使用更通用的类 form-control 获得相同的结果。不过，我们需要使用 height 而不是 line-height，无论如何，这对 selectInput 都可以正常工作。

ui <- fluidPage(
  tags$style(type = "text/css", ".form-control.shiny-bound-input, 
.selectize-input {height: 70px;}"),
  selectInput(inputId = "another_id",
              label = "bar",
              choices = c(1, 2)),
  numericInput(inputId = "some_id",
              label = "foo",
              value = 1)
)

server <- function(input, output, session) {}

shinyApp(ui, server)

编辑:

如果您想将某些 CSS 应用于特定输入，则需要使用其 id，因此该样式不适用于共享同一类的所有元素。在上面的示例中，如果您只想更改 id 为 some_id 的 numericInput 的高度，您可以使用 #some_id 选择此元素，导致以下代码:

tags$style(type = "text/css", 
           "#some_id.form-control.shiny-bound-input {height: 70px;}")