R shiny: изменить цвет отдельных флажков в checkboxGroupInput

Question

Я хочу изменить цвет фактических отдельных флажков со стандартного блестящего синего в checkboxGroupInput.

Я нашел следующий код в качестве ответа на этот вопрос Раскрашивание вариантов checkboxGroupInput , который изменит цвет шрифта, но не самого флажка.

library("shiny")

ui <- fluidPage(
  checkboxGroupInput(
    inputId = "my_cbgi",
    label = "Choose Something", 
    choiceNames = list(
      tags$span("A", style = "color: red;"),
      tags$span("B", style = "color: red;"), 
      tags$span("C", style = "color: blue;"), 
      tags$span("D", style = "font-weight: bold;")
    ),
    choiceValues = c("A", "B", "C", "D")
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Есть ли способ изменить это, чтобы изменить цвет отдельных флажков? Заранее благодарим за помощь.

Answer 1

С prettyCheckboxGroup пакета shinyWidgets вы можете сделать следующее:

library(shiny)
library(shinyWidgets)

items <- c("One", "Two", "Three")

CSS <- "
/* CSS for the labels */
.pretty input[value=One]~.state span {
  color: red;
  font-weight: bold;
}
/* CSS for the checkboxes */
.pretty input[value=One]~.state label:after, 
.pretty input[value=One]~.state label:before {
  background-color: red;
}
.pretty input[value=Two]~.state label:after, 
.pretty input[value=Two]~.state label:before {
  background-color: green;
}
.pretty input[value=Three]~.state label:after, 
.pretty input[value=Three]~.state label:before {
  background-color: blue;
}
/* CSS for the checked checkboxes */
.pretty.p-default input:checked~.state label:after {
  background-color: yellow !important;
}
"

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  h1("Hello World"),
  prettyCheckboxGroup("numbers", label="Choose numbers", 
                      choiceNames = items, choiceValues = items, 
                      selected = items),
  verbatimTextOutput("value")
)

server <- function(input,output,session){
  output$value <- renderText(input$numbers)
}

shinyApp(ui, server)

Answer 2

Короткий ответ на ваш вопрос заключается в том, что это не очень просто сделать, и если вы не хотите напрямую связываться с HTML и CSS, я бы рекомендовал вам не тратить на это время .

Для создания контейнера для флажков checkBoxGroupInput использует shiny:::generateOptions под капотом. Взгляд на источник показывает, что, к сожалению, изменить стиль отдельных флажков непросто, потому что по умолчанию он применяет один и тот же class="checkbox" к каждому div ( ответ , указанный в комментарии, объясняет только, как чтобы установить стиль по умолчанию для всех вариантов).

Единственное средство, которое я вижу, - это вставить необработанный HTML прямо в ваш пользовательский интерфейс. Даже это осложняется тем фактом, что вы «по-прежнему не можете применять стили (границы и т. Д. c.) Непосредственно к элементу флажка, и эти стили влияют на отображение флажка HTML» в соответствии с ответьте в комментарии. Я сам новичок в CSS, но поиск по ссылкам, по сути, означает, что вам нужно создать флажок HTML с нуля и наложить флажок по умолчанию (очевидно, вы можете скрыть флажок по умолчанию, но у меня нет не удалось).

С учетом всего сказанного ниже вы найдете рабочий пример для вашего случая и вывод, который он генерирует под кодом. Обратите внимание, что я использую отдельные оболочки (.my_checkBox_red, .my_checkBox_blue и .my_checkBox_grey) в каждом случае. Вероятно, есть способ сделать это более эффективно, просто изменив соответствующие стили (colour:, background-colour:), но я не мог этого понять. Кроме того, одна вещь, которую определенно можно довольно легко сделать для улучшения приведенного ниже, - это автоматизировать генерацию длинной строки HTML, но у меня нет времени на это сейчас. Если вы хотите иметь go сами, блестящие функции checkBoxGroupInput и shiny:::generateOptions могут быть хорошей отправной точкой или просто создайте свою собственную функцию, используя sprintf, paste, ...

Надеюсь, это поможет!

library("shiny")

ui <- fluidPage(
  # The below now creates a custum css class. 
  tags$head(
    tags$style(HTML('
      .my_checkBox_red input[type="checkbox"]:before {
          border: 2px solid;
          color: red;
          background-color: white;
          content: "";
          height: 15px;
          left: 0;
          position: absolute;
          top: 0;
          width: 15px;
      }

      .my_checkBox_red input[type="checkbox"]:checked:after {
          border: 2px solid;
          color: red;
          background-color: #ffcccc;
          content: "✓";
          font-size: smaller;
          vertical-align: middle;
          text-align: center;
          height: 15px;
          left: 0;
          position: absolute;
          top: 0;
          width: 15px;
      }

      .my_checkBox_blue input[type="checkbox"]:before {
          border: 2px solid;
          color: blue;
          background-color: white;
          content: "";
          height: 15px;
          left: 0;
          position: absolute;
          top: 0;
          width: 15px;
      }

      .my_checkBox_blue input[type="checkbox"]:checked:after {
          border: 2px solid;
          color: blue;
          background-color: #ccccff;
          content: "✓";
          font-size: smaller;
          vertical-align: middle;
          text-align: center;
          height: 15px;
          left: 0;
          position: absolute;
          top: 0;
          width: 15px;
      }

      .my_checkBox_grey input[type="checkbox"]:before {
          border: 2px solid;
          color: grey;
          background-color: white;
          content: "";
          height: 15px;
          left: 0;
          position: absolute;
          top: 0;
          width: 15px;
      }

      .my_checkBox_grey input[type="checkbox"]:checked:after {
          border: 2px solid;
          color: grey;
          background-color: #e6e6e6;
          content: "✓";
          font-size: smaller;
          vertical-align: middle;
          text-align: center;
          height: 15px;
          left: 0;
          position: absolute;
          top: 0;
          width: 15px;
      }
    '))
  ),
  tags$div(
    HTML(
      '<div id="my_cbgi" class="form-group shiny-input-checkboxgroup shiny-input-container">
        <label class="control-label" for="my_cbgi">Choose Something</label>
        <div class="shiny-options-group">
          <div class="my_checkBox_red">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="my_cbgi" value="A"/>
                <span><span style="color: red;">A</span></span>
              </label>
            </div>
          </div>
          <div class="my_checkBox_red">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="my_cbgi" value="B"/>
                <span><span style="color: red;">B</span></span>
              </label>
            </div>
          </div>
          <div class="my_checkBox_blue">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="my_cbgi" value="C"/>
                <span><span style="color: blue;">C</span></span>
              </label>
            </div>
          </div>
          <div class="my_checkBox_grey">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="my_cbgi" value="D"/>
                <span><span style="font-weight: bold;">D</span></span>
              </label>
            </div>
          </div>
        </div>
      </div>'
    )
  ),
  textOutput("choice")
)

server <- function(input, output) {
  output$choice = renderText({
    input$my_cbgi
  })
}

shinyApp(ui = ui, server = server)