html - 选择 Shiny 的输入样式(用于两个不同的选择框)

Question

最近有人帮我解决了这个问题:Selectize Input style in shiny .现在，我想更进一步，遇到另一个问题。

我有两个选择输入。我想分别为每个选择器更改所选元素的颜色。这是澄清我的问题的图片。

我有什么:

以及我想获得的:

我试图用不同的 id 和类组合更改我的 css 但没有成功。你能帮帮我吗？

我的代码:

server.R:

library("shiny")

shinyServer(function(input, output){})

ui.R:

library("shiny")

shinyUI(fluidPage(

    tags$head(
        tags$style(HTML("
                        .item {
                        background: #2196f3 !important;
                        }
                        .selectize-dropdown-content .active {
                        background: #2196f3 !important;
                        }
                        "))
        ),

    sidebarLayout(
        sidebarPanel(
            selectizeInput("select", label=NULL,
                           choices=c("a", "b", "c", "d"),
                           multiple=TRUE, options=list(placeholder="Wybierz")),
            selectizeInput("select2", label=NULL,
                           choices=c("a", "b", "c", "d"),
                           multiple=TRUE, options=list(placeholder="Wybierz"))),

        mainPanel())
    )
)

Answer 1

你需要类似的东西

   tags$style(HTML(" .item {
                    background: #2196f3 !important;
                    }

                    #select2 + div> div>.item {
                    background:   #f3217a !important;
                    }
                    .selectize-dropdown-content .active {
                    background: #2196f3 !important;
                    }

                     #select2 + div> div>.selectize-dropdown-content .active {
                    background:   #f3217a !important;
                    }
                    "))

在你的 CSS 中

select2 将不同于所有其他“选择”

或为每个#select 定义颜色

请注意，您可以使用应用和粘贴在服务器端从表中执行此操作(如此处 1 参见更新)