Css 如何重新设置鼠标悬停时选择Input下拉列表的样式？

如何在selectInput下拉列表中使用css设置以下项目的样式

• 列表名称（非元素名称，例如下例中的新英格兰）
• 下拉列表中元素的悬停状态
• 滚动条

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

library(shiny)

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

---

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

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你看过文件了吗？这回答了你的问题吗@heds1我读过这篇文章，但我不是css专家，我找不到正确的样式选择器。例如，当您将鼠标悬停在下拉列表的某个元素上时，如何更改该元素的颜色和背景。@ismirsehregal谢谢您的评论，但我正在查找当您将鼠标悬停在下拉列表上时该元素上的css样式。您熟悉浏览器的inspect element工具吗？e、 例如，在元素上单击鼠标右键，单击“inspect element”或浏览器中的任何关联菜单，它将在右侧弹出。然后，您可以右键单击元素并选择“复制CSS选择器”或类似的内容，以便查看您需要为哪个元素编写CSS。谢谢您的回答！有没有一种方法可以设计滚动条的样式？
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;
}
"