如何取消shinyWidgets中radioGroupButtons的悬停效果？

你遇到的问题是因为radioGroupButtons的默认悬停、激活样式未被完全覆盖，导致鼠标操作后出现双按钮变蓝的视觉异常。可以通过扩展CSS样式，彻底取消悬停效果并修复该问题：

library(shiny)
library(shinyWidgets)

ui = fluidPage(
  
  tags$style(
    # 覆盖所有状态下的.btn-info样式，取消悬停、激活时的样式变化
    ".btn-info {
      background-color: #F0F0F0; 
      color: black; 
      border-color:#F0F0F0; 
      text-align: left;
    }
    .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
      background-color: #F0F0F0 !important; 
      color: black !important; 
      border-color:#F0F0F0 !important;
    }"
  ),

  radioGroupButtons(
    inputId = "Id067",
    choices = c("Yes (Start the survey)",
                "No (End the survey)"),
    direction = "vertical",
    selected = character(0),
    width   = "100%",
    status = 'info',
    size = 'normal',
))

server = function(...) {}

shinyApp(ui, server)

关键修改说明 #

• 新增.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active选择器，覆盖悬停、聚焦、激活、选中状态的样式
• 使用!important强制优先级，确保自定义样式覆盖组件默认的Bootstrap样式
• 统一所有状态下的背景色、文字色和边框色，彻底取消悬停时的样式变化，同时避免操作后出现双按钮高亮的异常

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