如何修改pickerInput组件中选项的hover背景颜色？

你之前通过choicesOpt的style参数设置hover样式无法生效，核心原因是行内CSS不支持:hover这类伪类选择器，必须通过自定义全局CSS来覆盖组件默认样式。

正确实现代码 #

library(shiny)
library(shinyWidgets)

shinyApp(
  ui = basicPage(
    # 嵌入自定义CSS修改悬停样式
    tags$style(HTML("
      .dropdown-menu > li > a:hover {
        background-color: blue !important;
        color: black !important;
        font-weight: bold !important;
      }
    ")),
    pickerInput("state", "State", split(state.name, state.division))
  ),
  server = function(input, output) {}
)

关键说明 #

• 用tags$style(HTML(...))添加全局CSS，目标选择器.dropdown-menu > li > a对应pickerInput下拉选项的链接元素，:hover指定鼠标悬停状态
• 加上!important是为了覆盖组件自带的默认样式优先级，确保自定义样式能生效
• 无需再通过choicesOpt的style参数设置，全局CSS会作用于所有下拉选项

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