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

How to change the styling of a specific Shiny widget

我想在我的 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) {

  }
)

我想实现 2 件事 -

  1. 想要将建议字段中的突出显示 颜色 更改为 yellowish to green
  2. 还想更改输入字段和建议容器之间的距离,比如10px

我的应用程序中还有一些其他小部件,因此上述修改后的样式应该不会影响其他小部件。

有什么办法可以实现吗?

任何指点将不胜感激。

最简单的方法就是将 CSS 直接添加到 header 中。有一篇关于 Shiny 应用程序样式的非常有用的文章 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) {
  }
)