如何在R Shiny中使用introjs正确高亮pickerInput组件？

pickerInput由标签、选择框容器等多个DOM元素组成，默认用#color作为选择器时，仅能选中内部的下拉选择框元素，导致高亮范围不完整。以下两种方法可以在不使用introBox的前提下实现完整高亮：

方案1：使用CSS选择器定位完整组件容器 #

利用CSS的:has选择器，直接定位包含#color的整个.shiny-input-container容器（该容器包含pickerInput的标签和选择框）：

library(shiny)
library(rintrojs)
library(shinyWidgets)

ui <- fluidPage(
  introjsUI(),
  pickerInput(
    inputId = "color",
    label = "What is your favorite color?",
    choices = c("Red", "Green", "Blue")
  ),
  br(),
  actionButton(inputId = "tour", label = "Start Tour")
)

server <- function(input, output, session) {
  introjs(session)
  observeEvent(input$tour, {
    introjs(session, options = list(
      steps = list(
        list(element = "div.shiny-input-container:has(#color)",
             intro = "Pick a color."),
        list(element = "#tour",
             intro = "This is a button.")
      )
    ))
  })
}

shinyApp(ui, server)

方案2：使用jQuery方法兼容旧浏览器 #

如果你的应用需要兼容不支持:has选择器的旧浏览器，可以用jQuery的closest()方法找到最外层的组件容器，通过JS函数返回目标元素：

library(shiny)
library(rintrojs)
library(shinyWidgets)

ui <- fluidPage(
  introjsUI(),
  pickerInput(
    inputId = "color",
    label = "What is your favorite color?",
    choices = c("Red", "Green", "Blue")
  ),
  br(),
  actionButton(inputId = "tour", label = "Start Tour")
)

server <- function(input, output, session) {
  introjs(session)
  observeEvent(input$tour, {
    introjs(session, options = list(
      steps = list(
        list(element = JS('function() { return $("#color").closest(".shiny-input-container")[0]; }'),
             intro = "Pick a color."),
        list(element = "#tour",
             intro = "This is a button.")
      )
    ))
  })
}

shinyApp(ui, server)

两种方案都能选中pickerInput的完整区域，实现正常高亮，且不需要依赖introBox，适合多引导tour的场景。

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