如何更改特定 Shiny 小部件的样式答案

【问题标题】：How to change the styling of a specific Shiny widget如何更改特定 Shiny 小部件的样式
【发布时间】：2020-07-18 02:40:53
【问题描述】：

我想在我的Shiny app 中设置来自dqshiny 包的闪亮输入，如下所示 -

library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
  ui = fluidPage(
    autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
  ),
  server = function(input, output, session) {

  }
)

我想实现两件事-

想要将建议字段中的突出显示 color 从 yellowish to green 更改
还想更改输入字段和建议容器之间的距离，比如10px。

我的应用中还有一些其他小部件，因此上述修改的样式不应影响其他小部件。

有什么办法可以做到吗？

任何指针都将受到高度赞赏。

【问题讨论】：

在建议字段中突出显示颜色是什么意思？没有什么是黄色的
当您在框中输入内容时，您会在建议框中获得一些建议。现在，如果您将鼠标悬停在这些建议上，那么各个字段将以黄色背景色突出显示
明白了。并且通过改变输入字段和建议容器之间的距离，你的意思是把下拉选项往下推一点吗？

标签： r shiny shinyapps

【解决方案1】：

最简单的方法是将 CSS 直接添加到标题中。有一篇关于样式化闪亮应用程序的非常有用的文章here。

library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
    ui = fluidPage(
        tags$head(
            tags$style(
                HTML(
                '
                .autocomplete-items div:hover {
                    background-color: green;
                }
                #auto1autocomplete-list {
                    margin-top: 10px;
                }
                '
                )
            )
        ),
        autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
    ),
  server = function(input, output, session) {
  }
)

【讨论】：

在哪里可以获得相应 DOM 元素的类和 id，例如#auto1autocomplete-list?
在您选择的浏览器中使用检查工具？