css - R Shiny 小部件：如何为单选按钮（）和复选框组输入（）着色？答案

【问题标题】：css - RShiny widgets: How to color the radioButtons() and checkboxGroupInput()?css - R Shiny 小部件：如何为单选按钮（）和复选框组输入（）着色？
【发布时间】：2021-05-31 20:51:57
【问题描述】：

我在我的 RShiny 应用程序中使用了许多不同的 checkboxGroupInput() 和 radioButtons()，其中一个代码 sn-p 如下所示：

checkboxGroupInput(inputId = "maDays", label = "Select Trading Days", 
                                      choices = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                                  "Friday", "Saturday", "Sunday"),
                                      selected = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                                   "Friday"), 
                                      inline = TRUE),
radioButtons(inputId = "maTimeGran", label = "Select Time Granularity", 
                                choices = c("Hourly" = "hour", "Daily" = "day", 
                                            "Weekly" = "week"),
                                selected = "day")

并给出：

现在我的问题是：如何使用css-tag 更改我所有选择的单选按钮（按钮，不是文本）和复选标记（不是文本）的coloring？我的首选颜色是#007d3c。

【问题讨论】：

标签： css r checkbox shiny radio-button

【解决方案1】：

我能够调整 https://dev.to/kallmanation/styling-a-radio-button-with-only-css-4llc 的方法来让它发挥作用。（复选框在选中时具有纯色填充颜色而不是复选标记。）

代码如下：

library(shiny)

ui <- fluidPage(
    tags$head(
        tags$style(HTML("
                    label > input[type='radio'] {
                        opacity: 0;
                        position: absolute;
                    }
                    label > input[type='radio'] + *::before {
                        content: '';
                        margin: 4px 0 0;
                        width: 13px;
                        height: 13px;
                        position: absolute;
                        margin-left: -20px;
                        border-radius: 50%;
                        border-style: solid;
                        border-width: 0.1rem;
                        border-color: #007d3c;
                    }
                    label > input[type='radio']:checked + *::before {
                        background: radial-gradient(white 0%, white 30%, #007d3c 30%, #007d3c);
                                border-color: #007d3c;
                    }
                    label > input[type='checkbox'] {
                        opacity: 0;
                        position: absolute;
                    }
                    label > input[type='checkbox'] + *::before {
                      content: '';
                      position: absolute;
                      margin: 4px 0 0;
                      margin-left: -20px;
                      align: center;
                      width: 13px;
                      height: 13px;
                      margin-right: 1rem;
                      border-radius: 0%;
                      border-style: solid;
                      border-width: 0.1rem;
                      border-color: #007d3c;
                    }
                    label > input[type='checkbox']:checked + *::before {
                      content: '';
                      width: 13px;
                      height: 13px;
                      background-color: #007d3c;
                    }
                  "))
    ),
    checkboxGroupInput(inputId = "maDays", label = "Select Trading Days", 
                       choices = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                   "Friday", "Saturday", "Sunday"),
                       selected = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                    "Friday"), 
                       inline = TRUE),
    radioButtons(inputId = "maTimeGran", label = "Select Time Granularity", 
                 choices = c("Hourly" = "hour", "Daily" = "day", 
                             "Weekly" = "week"),
                 selected = "day")
)

server <- function(input, output) {
    ## put server code here
}

shinyApp(ui = ui, server = server)

这是我的原始答案，它为选中元素设置标签样式，以防对其他人有用：

library(shiny)

ui <- fluidPage(
    tags$head(
        tags$style(HTML("
                  input:checked + span {
                    color: #007d3c;
                  }
                  "))
    ),
    checkboxGroupInput(inputId = "maDays", label = "Select Trading Days", 
                       choices = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                   "Friday", "Saturday", "Sunday"),
                       selected = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                    "Friday"), 
                       inline = TRUE),
    radioButtons(inputId = "maTimeGran", label = "Select Time Granularity", 
                 choices = c("Hourly" = "hour", "Daily" = "day", 
                             "Weekly" = "week"),
                 selected = "day")
)

server <- function(input, output) {
  ## put server code here
}

shinyApp(ui = ui, server = server)

【讨论】：

当我使用它时，文本（星期一，...每小时，...）是彩色的（我不想要的）而不是复选标记和按钮。你知道吗，css 用于彩色复选标记和按钮？
这有点复杂，但这个页面可能会有所帮助：w3schools.com/howto/howto_css_custom_checkbox.asp
感谢您的帮助，我已经尝试使用复选框和单选按钮执行此操作（您的网站链接），但它对我或我的情况都不起作用。