Marta Marta - 6 months ago 122
CSS Question

Selectize Input style in shiny (for two different selectize boxes)

recently someone has helped me with this problem: Selectize Input style in shiny. Now, I'd like to go further and have another problem.

What I have are two

selectize inputs
. I'd like to change colours of selected items for each of the selector separatly. Here is the picture which clarifies my problem.

What I have:

enter image description here

And what I'd like to obtain:

enter image description here

I've tried to change my
css
with different combinations of id's and classes but with no success. Could you help me?

My code:

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

You need something like

   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;
                    }
                    "))

in your css

select2 will be different from all others "selects"

or define color for each #select

PS you can do it on server side from table using apply and paste ( like here 1 see in update )

Comments