Selectize Input style in shiny

Question

I'm trying to customize my selectize input in shiny. What I have is:

And what I would like to have is to change colour of selected items like here:

I've tried to change my css, but I've managed to change only this "a" colour by adding:

.selectize-input.input-active, .selectize-input.input-active:hover, .selectize-control.multi .selectize-input.focus {border-color: #2196f3 !important;}
.selectize-dropdown .active {background: #2196f3 !important;}

I'd like to change also colour of "c" and "b" but I don't know how. Could you help me please?

My code:

server.R:

library("shiny")

shinyServer(function(input, output){})

ui.R:

library("shiny")

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

Lorenzo Rossi · Accepted Answer · 2016-05-23 09:34:59Z

7

Is this working (just after fluidPage and before sidebarLayout)?

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

edited May 23, 2016 at 9:34

answered May 23, 2016 at 9:17

Lorenzo Rossi

1,4811 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marta Over a year ago

thanks! That works. Do you know what to add there to change font colour also?

Lorenzo Rossi Over a year ago

I've updated it to include also color = white but you can add any valid css color there

Marta Over a year ago

Great! Why is this !important needed? Maybe it's basic but I'm quite new to html...

Collectives™ on Stack Overflow

Selectize Input style in shiny

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related