更改禁用的闪亮文本输入的标签颜色

Question

我不明白如何用 CSS 正确处理闪亮的

textInput

的标签。我在搜索时发现了许多不同的方法来更改标签属性，但在尝试将其适应我的用户界面中的

tags$head(tags$style())

格式时，发现有些有效，有些无效。我认为在尝试被动地更改标签时理解这一点很重要。虽然我可以更改默认标签颜色，但当禁用

textInput

时，我无法将其更改为其他颜色，就像文本输入字段和占位符一样。

library(shiny)
library(shinyjs)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  tags$head(
    #enabled settings:
    tags$style(HTML(".form-control {color:#3c8930; background:#c5e6c0;}")),
    tags$style(HTML(".form-control::placeholder{color:#7fbc75;}")),
    tags$style(HTML("#name-label {color: #3c8930;}")),
    #tags$style(HTML(".form-control-label {color: #3c8930;}")), #this does not work
    #tags$style(HTML("label.form-control-label {color: #3c8930;}")), #this does not work
    #tags$style(HTML("label.control-label {color: #3c8930;}")), #this works but changes all labels, even if they're not textInput

    #disabled settings:
    tags$style(HTML(".form-control.disabled{color:#c74545; background:#f7c2c2;}")),
    tags$style(HTML(".form-control.disabled::placeholder{color:#c17575;}")),
    #tags$style(HTML(" ... how to change the label color here?..."))
  ), 
  textInput(inputId = "name", 
            label='Label',
            placeholder = "Placeholder"),
  checkboxInput('disable','disable', value=F),
  radioButtons("name2", label="Label2",inline = TRUE, c("A", "B"))
)

server <- function(input, output, session) {
  
  observe(
    if(input$disable){
      shinyjs::disable('name')
     }else{
      shinyjs::enable('name')
    }
  )
}

shinyApp(ui = ui, server = server)

我可以通过反应性地更新观察者中的颜色来解决问题，但在我的完整应用程序中，我还使用

shinyFeedback

，这些更新会覆盖标签的任何反馈颜色。

library(shinyFeedback)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  shinyFeedback::useShinyFeedback(),
  tags$head(
    #enabled settings:
    tags$style(HTML(".form-control {color:#3c8930; background:#c5e6c0;}")),
    tags$style(HTML(".form-control::placeholder{color:#7fbc75;}")),
 
    #disabled settings:
    tags$style(HTML(".form-control.disabled{color:#c74545; background:#f7c2c2;}")),
    tags$style(HTML(".form-control.disabled::placeholder{color:#c17575;}")),
  ), 
  textInput(inputId = "name", 
            label=tags$p('Label', style = "color:#3c8930;", id="name_label"),
            placeholder = "Placeholder"),
  checkboxInput('disable','disable', value=F),
  radioButtons("name2", label="Label2",inline = TRUE, c("A", "B"))
)

server <- function(input, output, session) {
  
  observe(
    if(input$disable){
      shinyjs::disable('name')
      shinyjs::html("name_label", "<p style='color:#c74545'>Label</p>")
    }else{
      shinyjs::enable('name')
      shinyjs::html("name_label", "<p style='color:#3c8930'>Label</p>")
    }
  )
    
    observe(
      shinyFeedback::feedbackWarning("name", input$name2=='B', "B is selected", icon=NULL)
    )
}

shinyApp(ui = ui, server = server)

Answer 1

改变颜色有多种可能性。一是如果单击禁用/启用按钮，您将更改元素的类：

observe(
  if(input$disable){
    shinyjs::disable('name')
    shinyjs::runjs('document.getElementById("name-label").className = "control-label-disabled"')
  }else{
    shinyjs::enable('name')
    shinyjs::runjs('document.getElementById("name-label").className = "control-label"')
  }
)

这只会影响具有

id = 'name-label'

的元素，但您当然可以更改选择器以也定位其他元素。完成此操作后，您可以为这些类定义

css

，例如

tags$style(HTML(".control-label {color: #3c8930;}
                 .control-label-disabled {color: #c74545;}"))

然后风格就会改变。下面是一个完整的示例。请注意，因此我还为残疾人士添加了另一个

border-color

form-control

，因为在您的示例中，红色框周围仍然存在一个人们可能不希望拥有的绿色小边框。

library(shiny)
library(shinyjs)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  tags$head(
    #enabled settings:
    tags$style(HTML(".form-control {color:#3c8930; background:#c5e6c0;}")),
    tags$style(HTML(".form-control::placeholder{color:#7fbc75;}")),
    tags$style(HTML(".control-label {color: #3c8930;}")),
    
    #disabled settings:
    tags$style(HTML(".form-control.disabled{
                        color:#c74545; 
                        background:#f7c2c2;
                        border-color:#c74545; 
                     }")),
    tags$style(HTML(".form-control.disabled::placeholder{color:#c17575;}")),
    tags$style(HTML(".control-label-disabled {color: #c74545;}"))
  ), 
  textInput(inputId = "name", 
            label='Label',
            placeholder = "Placeholder"),
  checkboxInput('disable','disable', value=F),
  radioButtons("name2", label="Label2",inline = TRUE, c("A", "B"))
)

server <- function(input, output, session) {
  
  observe(
    if(input$disable){
      shinyjs::disable('name')
      shinyjs::runjs('document.getElementById("name-label").className = "control-label-disabled"')
    }else{
      shinyjs::enable('name')
      shinyjs::runjs('document.getElementById("name-label").className = "control-label"')
    }
  )
}

shinyApp(ui = ui, server = server)