I am working on a multi select input control from {shinyWidgets}, but the default font color makes it difficult to read.
Here is an example:
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
multiInput(inputId = "id", label = "Datasets:", choices = 1:5),
verbatimTextOutput(outputId = "res")
)
server <- function(input, output, session) {
output$res <- renderPrint({ input$id })
}
shinyApp(ui = ui, server = server)
How can I change the font color?
You can style a multiselect input control (i.e., shinyWidgets::multiInput()
) as desired with CSS.
To get some ideas about how to do this here is the relevant CSS file from the {shinyWidgets} github page, but because that file is minified and therefore difficult to read, you might instead look at the CSS file here.
.multi-wrapper .non-selected-wrapper {
background: black;
}
.multi-wrapper .selected-wrapper {
background: black;
}
.multi-wrapper .item {
color: white;
}
.multi-wrapper .non-selected-wrapper .item.selected {
opacity: .5;
color: white;
}
.multi-wrapper .selected-wrapper .item {
color: white;
}
library(shinyWidgets)
ui <- fluidPage(
tags$head(
tags$link(
rel = "stylesheet",
type = "text/css",
href = "shinyWidgets_multiInput.css"
)
),
multiInput(
inputId = "id",
label = "Fruits :",
choices = c(
"Banana",
"Blueberry",
"Cherry",
"Coconut",
"Grapefruit",
"Kiwi",
"Lemon",
"Lime",
"Mango",
"Orange",
"Papaya"
),
selected = "Banana",
width = "350px"
), verbatimTextOutput(outputId = "res")
)
server <- function(input, output, session) {
output$res <- renderPrint({
input$id
})
}
shinyApp(ui = ui, server = server)
Reprex files hosted with on GitHub