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 之后。