更改 shinyWidgets::numericInputIcon() 的背景颜色

Question

我有两个数字输入字段，default 和 different，每个字段的右侧都有一个“/mth”标签。我只想更改 的背景颜色 与 different 关联的“/mth”。

第一个 tags$style 更改 different 的数字输入的背景颜色。第二个 tags$style 更改所有“/mth”的背景颜色。

如何将两者结合起来，以便只有 different 的“/mth”的背景颜色发生变化？

library("shiny")
library("bslib")
library("shinyWidgets")

per_month <- "/mth"

ui <- bootstrapPage(
  tags$head(
    tags$style("#different {
               background-color: #525250 !important;}"
    ),
    # tags$style(".input-group-text{
    #            background-color: #FF6FAB !important;}"
    # )
  ),
  
  # https://bootswatch.com/journal/
  theme = bs_theme(version = 5, "font_scale" = 1.0), 
  div(class = "container-fluid",
      
      div(class = "row",
          div(class="col-4", 
              numericInputIcon(
                inputId = "default",
                label = "Default",
                value = 10,
                min = 0,
                max = 9000,
                width = "160px",
                icon = list(NULL, per_month)
              ),
          ),
          div(class="col-4", 
              numericInputIcon(
                inputId = "different",
                label = "Different",
                value = 255,
                min = 0,
                max = 9000,
                width = "160px",
                icon = list(NULL, per_month)
              ),
          ),
    )
  )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

Answer 1

这里的问题是 <span class="input-group-text"> 不是 <input id="different"> 的 child:

<div class="form-group shiny-input-container" style="width:160px;">
  <label class="control-label" for="different">Different</label>
  <div class="input-group">
    <input id="different" type="number" class="form-control numeric-input-icon" value="255" min="0" max="9000"/>
    <div class="input-group-addon sw-input-icon input-group-append">
      <span class="input-group-text">/mth</span>
    </div>
  </div>
  <span class="help-block invalid-feedback hidden d-none"></span>
</div>

在我们更改 backgroundColor 之前，我们需要找到 parentNode:

library("shiny")
library("bslib")
library("shinyWidgets")

per_month <- "/mth"

ui <- bootstrapPage(
  tags$head(
    tags$script(HTML('
    $(document).on("shiny:connected", function(event) {
      el = document.getElementById("different");
      el.parentNode.querySelector(".input-group-text").style.backgroundColor = "#525250";
    });
'))),
  # https://bootswatch.com/journal/
  theme = bs_theme(version = 5, "font_scale" = 1.0), 
  div(class = "container-fluid",
      div(class = "row",
          div(class="col-4", 
              numericInputIcon(
                inputId = "default",
                label = "Default",
                value = 10,
                min = 0,
                max = 9000,
                width = "160px",
                icon = list(NULL, per_month)
              ),
          ),
          div(class="col-4",
              numericInputIcon(
                inputId = "different",
                label = "Different",
                value = 255,
                min = 0,
                max = 9000,
                width = "160px",
                icon = list(NULL, per_month)
              )
          )
      )
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

编辑： 如果你想要使用 style 标签的内联 css 解决方案（不太健壮 - 请参阅下面我的评论）：

tags$style(HTML("body > div > div > div:nth-child(2) > div > div > span {background-color: #525250 !important;}")

更改 shinyWidgets::numericInputIcon() 的背景颜色

Change background color of shinyWidgets::numericInputIcon()

css

r

shiny

shinywidgets