如何使shinyWidgets中multiple=FALSE的pickerInput拥有与multiple=TRUE一致的CSS样式及勾选图标

我懂你遇到的这个问题！当pickerInput设为multiple=FALSE时，选中项会有个扎眼的蓝色背景，和多选模式下的样式完全不统一，而且想加勾选图标也加不上对吧？别担心，我给你分享两种实用的解决办法，保证能让单选的picker和多选的看起来一模一样：

方法一：自定义CSS统一样式（最稳妥） #

我们只需要做两件事：去掉单选模式下选中项的蓝色背景，再给选中项添加上和多选模式一致的勾选图标。直接在UI里加入自定义CSS就能搞定，完整代码如下：

library(shinyWidgets)
library(shiny)

shinyApp(
  ui = fluidPage(
    # 加入这段自定义CSS来统一样式
    tags$style(HTML("
      /* 移除单选模式下选中项的蓝色背景 */
      .bootstrap-select:not(.show-tick) .dropdown-menu li.selected a {
        background-color: transparent !important;
        color: inherit !important;
      }
      /* 给单选模式的选中项添加勾选图标，和多选样式对齐 */
      .bootstrap-select:not(.show-tick) .dropdown-menu li.selected a::before {
        font-family: 'Glyphicons Halflings';
        content: \"\\e013\"; /* 这是glyphicon-check图标的Unicode编码 */
        margin-right: 8px;
        color: #337ab7; /* 和多选模式的图标颜色保持一致 */
      }
    ")),
    pickerInput(
      inputId = "single_picker",
      label = "multiple = FALSE（已统一样式）",
      choices = c("a", "b", "c", "d"),
      multiple = FALSE
    ),
    pickerInput(
      inputId = "multi_picker",
      label = "multiple = TRUE",
      choices = c("a", "b", "c", "d"),
      multiple = TRUE
    )
  ),
  server = function(input, output) {
    NULL
  }
)

代码说明： #

1. 第一部分CSS专门针对单选模式的picker（也就是没有show-tick类的picker），强制移除了选中项的蓝色背景，让它和多选模式的背景保持一致；
2. 第二部分通过伪元素::before给选中项添加了官方的glyphicon-check图标，颜色也和多选模式的图标对齐，视觉上完全统一。

方法二：强制启用show-tick选项 #

其实你之前尝试的tick-icon参数本身是有效的，但单选模式下pickerInput默认不会加载勾选框的渲染逻辑，我们只需要强制开启show-tick选项，再配合一点点CSS去掉蓝色背景即可：

library(shinyWidgets)
library(shiny)

shinyApp(
  ui = fluidPage(
    tags$style(HTML("
      /* 移除单选模式下的蓝色背景 */
      .bootstrap-select.show-tick .dropdown-menu li.selected a {
        background-color: transparent !important;
        color: inherit !important;
      }
    ")),
    pickerInput(
      inputId = "single_picker",
      label = "multiple = FALSE（启用show-tick）",
      choices = c("a", "b", "c", "d"),
      multiple = FALSE,
      options = list(
        "show-tick" = TRUE,
        "tick-icon" = "glyphicon glyphicon-check"
      )
    ),
    pickerInput(
      inputId = "multi_picker",
      label = "multiple = TRUE",
      choices = c("a", "b", "c", "d"),
      multiple = TRUE
    )
  ),
  server = function(input, output) {
    NULL
  }
)

这种方法相当于让单选模式的picker“假装”是多选模式，直接复用官方的勾选图标样式，再用CSS去掉单选特有的蓝色背景，效果和方法一完全一样。

补充说明 #

你之前用的"glyphicon glyphicon-check-mark"是错误的类名，官方的勾选图标类名是glyphicon glyphicon-check，这也是你之前设置图标无效的原因之一哦。

内容来源于stack exchange