您如何根据值选择性地在 R 中使用 CSS 设置样式复选框？

Question

有没有一种方法可以从 R Shiny 中生成的组中指定单个复选框以使用 CSS 设置样式？

我有一组“父”复选框，我想让用户清楚他们控制哪些“子”复选框，因此我尝试用不同的颜色填充每个复选框。

为了简单起见，我只在此处显示“父”复选框

R 代码：

library(shiny)
library(shinyWidgets)

items <- c("One","Two","Three","Four","Five","Six")

runApp(
  list(ui = shinyUI(fluidPage(
    includeCSS("www/test_css.css"),
    h1("Hello World"),
    prettyCheckboxGroup('numbers',label="Choose numbers",choiceNames = items, choiceValues = items,selected = items),
    verbatimTextOutput("value")
  )),
  server = shinyServer(function(input,output,session){
    output$value <- renderText(input$numbers)
  })

  ))

适用于所有复选框的 CSS 代码：

h1 {text-decoration: underline;
  color: blue;
}

#numbers :after, #numbers :before{
  background-color:orange;
}

通过查看 prettyCheckboxGroup 的 HTML，没有可供我参考的 ID，只有值：

<div id="numbers" class="form-group shiny-input-checkboxgroup shiny-input-container">
  <label class="control-label" for="numbers">Choose numbers</label>
  <div class="shiny-options-group">
    <div style="height:7px;"></div>
    <div class="pretty p-default">
      <input type="checkbox" name="numbers" value="One" checked="checked"/>
      <div class="state">
        <label>
          <span>One</span>
        </label>
      </div>
    </div>
    <div style="height:3px;"></div>
    <div class="pretty p-default">
      <input type="checkbox" name="numbers" value="Two" checked="checked"/>
      <div class="state">
        <label>
          <span>Two</span>
        </label>
      </div>
    </div>
etc...

我尝试过各种方法，例如 input[value=One] 和 #numbers ~ input[value=One]

您可能会说，我对 CSS 还很陌生，任何帮助将不胜感激，干杯！

Answer 1

这适用于这个 CSS：

.pretty input[value=One]~.state label:after, 
.pretty input[value=One]~.state label:before {
  background-color: orange !important;
}

Answer 2

您可以使用shinyjs 包为每个input 分配一个唯一的CSS id，如下所示：

library(shiny)
library(shinyWidgets)
library(shinyjs)

items <- c("One","Two","Three","Four","Five","Six")

runApp(
  list(ui = shinyUI(fluidPage(
    shinyjs::useShinyjs(),
    includeCSS("css.css"),
    h1("Hello World"),
    prettyCheckboxGroup('numbers',label="Choose numbers",choiceNames = items, choiceValues = items,selected = items),
    verbatimTextOutput("value")
  )),
  server = shinyServer(function(input,output,session){
    shinyjs::runjs(HTML('
    var inputs = $(".shiny-options-group").find(".p-default input");
                        for(var i = 0; i < inputs.length; i++) {
                        inputs[i].setAttribute("id", "input_" + i);
                        }
                        '))
    output$value <- renderText(input$numbers)
  })

  ))

复选框组中的第一个 input 元素将具有 ID input_1。您现在可以在您的 CSS 文件中使用它。