Shiny checkboxGroupButtons选中状态自定义不同颜色CSS问题咨询

问题原因 #

checkboxGroupButtons的结构中，视觉上的按钮是<label>元素，实际的复选框<input>是隐藏的。选中状态时，shiny会给对应<label>添加.active类，而非直接触发:checked伪类（因为:checked作用在隐藏的<input>上，不是视觉按钮）。之前使用:checked无效，就是因为选错了作用元素。

解决方案 #

通过针对每个按钮的<label>元素，结合.active类来设置选中状态的独特颜色，同时保留未选中和hover状态的样式。

修改后的完整代码：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      /* 所有按钮的基础样式（未选中状态） */
      .btn-group-toggle .btn-custom-class {
        background: green !important;
        color: black !important;
        border: 1px solid red !important;
        margin: 0 2px;
      }
      
      /* 所有按钮的hover状态 */
      .btn-group-toggle .btn-custom-class:hover {
        background: yellow !important;
        color: black !important;
      }
      
      /* 第1个按钮的选中状态 */
      .btn-group-toggle .btn-custom-class:nth-child(1).active {
        background: red !important;
        color: white !important;
      }
      
      /* 第2个按钮的选中状态 */
      .btn-group-toggle .btn-custom-class:nth-child(2).active {
        background: blue !important;
        color: white !important;
      }
      
      /* 第3个按钮的选中状态 */
      .btn-group-toggle .btn-custom-class:nth-child(3).active {
        background: orange !important;
        color: white !important;
      }
      
      /* 第4个按钮的选中状态 */
      .btn-group-toggle .btn-custom-class:nth-child(4).active {
        background: purple !important;
        color: white !important;
      }
      
      /* 第5个按钮的选中状态 */
      .btn-group-toggle .btn-custom-class:nth-child(5).active {
        background: teal !important;
        color: white !important;
      }
      
      /* 第6个按钮的选中状态 */
      .btn-group-toggle .btn-custom-class:nth-child(6).active {
        background: pink !important;
        color: black !important;
      }
    "))
  ),
  
  checkboxGroupButtons(
    inputId = "cluster_groups",
    label = "Clusters Displayed",
    choiceNames = c("1", "2", "3", "4", "5", "6"),
    choiceValues = 1:6,
    status = "custom-class"
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

关键修改点 #

• 用.btn-custom-class.active替代:checked，因为选中时label会被添加.active类
• 使用:nth-child(n)选择器定位每个按钮，为每个按钮设置独特的background颜色
• 修正了border样式（原代码缺少1px solid，导致边框不显示）
• 可选调整选中时的文字颜色，提升可读性

内容的提问来源于stack exchange，提问作者jzadra