css - 更改 Shiny 应用程序的 selectizeInput 中边框阴影的颜色

Question

我有一个带有 selectizeInput 的 Shiny 应用程序，这是一个示例:

library(shiny)
ui <- fluidPage(
  theme = "bootstrap.css", # load css-settings
  br(),
  selectizeInput('in1', 'Options', c(Choose='', state.name))
)

server <- function(input, output,session) {}

shinyApp(ui = ui, server = server)

在我的 bootstrap.css 文件(放置在 www 文件夹中)中，我添加了以下内容

   .selectize-input.focus {
                                  border-color: #cccccc;
                                  -webkit-box-shadow: none;
                                  box-shadow: none;
                                  outline: none;
                              }

删除 selectizeInput 框周围的蓝色阴影。然而，什么也没发生...有人知道帮忙吗？

Answer 1

在 Shiny 上有以下类:

.selectize-input.focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

因此，要消除阴影，您可以使用以下命令:

.selectize-input.focus {
    border-color:#66afe9;
    outline: 0;
    -webkit-box-shadow:none !important;
    box-shadow:none !important;
}

还要确保 CSS 包含在 Shiny CSS 之后。