如何在鼠标悬停时重新设置selectInput下拉列表的样式

Question

如何在selectInput下拉列表中使用css对以下项目进行样式设置？

• 列表名称(不是元素名称，例如下面示例中的新英格兰(
• 下拉列表中元素的悬停状态
• 滚动条

请参阅下面的最小可复制示例。

library(shiny)
shinyApp(
ui = basicPage(
selectInput("state", "State", split(state.name, state.division))
),
server = function(input, output) {}
)

Answer 1

以下是如何设置所选选项、可用选项和选项组标题的样式：

library(shiny)
css <- "
.selectize-item {
color: blue;
}
.selectize-option {
color: red;
}
.selectize-option:hover {
background-color: yellow;
}
.selectize-oheader {
color: green !important;
font-size: 18px !important;
}
"
render <- I("
{
item: function(item, escape) { 
return '<div class="item selectize-item">' + escape(item.label) + '</div>'; 
},
option: function(item, escape) {
return '<div class="option selectize-option">' + escape(item.label) + '</div>';
},
optgroup_header: function(item, escape) {
return '<div class="optgroup-header selectize-oheader">' + escape(item.label) + '</div>';
}
}")

shinyApp(
ui = fluidPage(
tags$head(tags$style(HTML(css))),
selectizeInput("state", "Choose a state:",
list(`East Coast` = list("NY", "NJ", "CT"),
`West Coast` = list("WA", "OR", "CA"),
`Midwest` = list("MN", "WI", "IA")),
options = list(render = render)
),
textOutput("result")
),
server = function(input, output) {
output$result <- renderText({
paste("You chose", input$state)
})
}
)

---

编辑

下面是如何设置滚动条的样式：

css <- "
/* selected option */
.selectize-item {
color: blue;
}
/* options */
.selectize-option {
color: red;
}
.selectize-option:hover {
background-color: yellow;
}
/* option groups headers */
.selectize-oheader {
color: green !important;
font-size: 18px !important;
}
/* scrollbar */
.selectize-dropdown-content::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.selectize-dropdown-content::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.selectize-dropdown-content::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
"

请参阅此处了解不同的样式。