如何修改Datatables中「Show n entries」下拉框颜色？需确定要覆盖的CSS类

我刚好之前折腾过Datatables这个下拉框的样式，给你整理一下需要覆盖的核心CSS类和具体代码：

• 修改选择框的基础边框颜色：
  目标类是 .dataTables_length select，默认的蓝色边框就是在这里定义的，直接替换边框颜色即可：

  .dataTables_length select {
    border: 1px solid #6c757d; /* 示例：灰色边框，替换成你要的颜色 */
    border-radius: 4px; /* 可选：调整圆角 */
  }
  

• 覆盖聚焦时的蓝色边框/轮廓：
  当点击下拉框时，默认会出现蓝色的聚焦轮廓，需要用 .dataTables_length select:focus 来修改：

  .dataTables_length select:focus {
    border-color: #28a745; /* 示例：绿色聚焦边框 */
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2); /* 可选：配合边框的柔和阴影 */
    outline: none; /* 去掉浏览器默认的聚焦外框 */
  }
  

• 修改选项hover时的背景色：
  针对下拉选项的hover状态，用 .dataTables_length select option:hover 来定义：

  .dataTables_length select option:hover {
    background-color: #f8f9fa; /* 示例：浅灰色hover背景 */
    color: #212529; /* 可选：调整hover时的文字颜色 */
  }
  

• 可选：修改选中选项的背景色：
  如果需要自定义选中状态的样式，可以用 :checked 伪类：

  .dataTables_length select option:checked {
    background-color: #007bff; /* 示例：保留原蓝色但可自定义 */
    color: white;
  }
  

注意事项： #

如果你的样式没生效，大概率是Datatables默认CSS的优先级更高。可以尝试给选择器加上父容器的类（比如你的表格所在的div类），或者临时用 !important 强制覆盖（尽量少用，优先调整选择器优先级）。

内容的提问来源于stack exchange，提问作者M.E.