Change background color of shinyWidgets::numericInputIcon()

Question

I have two numeric input fields, default and different that each have a "/mth" label on the right. I wish to change the background color of only the "/mth" associated with different.

The first tags$style changes the background colour of different's numeric input. The second tags$style changes the background colour of all of the "/mth"s.

How do I combine the two so that the background colour of only different's "/mth" changes?

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)

ismirsehregal · Accepted Answer · 2022-02-22T07:44:01.913

The issue here is that <span class="input-group-text"> is not a child of <input id="different">:

<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>

Before we can change the backgroundColor we need to find the 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)

Edit: If you want a inline css solution using a style tag (less robust - see my comment below):

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

Is it possible to use Chrome > Inspect to manually find the parent node and construct an answer using, "tags$style"? — ixodid, Feb 22 '22 at 01:11
@ixodid yes it is - please see my edit. This however no longer checks the `inputId = different`. If you change the order of the inputs it the css will refer to another input. Accordingly the JS solution is more robust. — ismirsehregal, Feb 22 '22 at 07:49

Change background color of shinyWidgets::numericInputIcon()

1 Answers1