如何修改DataTables中折叠按钮（Collapse Button）的CSS样式

1. 定位按钮的CSS选择器 #

SearchPanes的折叠按钮默认带有dtsp-collapseButton类，切换折叠/展开状态时还会额外添加dtsp-collapsed类，用这些选择器就能精准定位目标按钮：

• 默认展开状态：.dtsp-collapseButton
• 折叠状态：.dtsp-collapseButton.dtsp-collapsed

2. 具体样式修改示例 #

根据需求调整以下代码，覆盖默认样式：

/* 修改按钮基础样式 */
.dtsp-collapseButton {
  background-color: #2c3e50 !important; /* 自定义背景色 */
  color: #ffffff !important; /* 文字/图标颜色 */
  border: none !important; /* 去掉边框 */
  padding: 6px 12px !important; /* 调整内边距 */
  border-radius: 4px !important; /* 圆角 */
  font-size: 14px !important; /* 字体大小 */
}

/* 按钮hover状态样式 */
.dtsp-collapseButton:hover {
  background-color: #34495e !important; /* hover时的背景色 */
}

/* 折叠状态下的按钮样式（可选） */
.dtsp-collapseButton.dtsp-collapsed {
  background-color: #e74c3c !important; /* 折叠后的背景色 */
}

/* 修改按钮内图标样式（如果需要） */
.dtsp-collapseButton > span {
  margin-right: 4px !important; /* 图标和文字的间距 */
  font-size: 16px !important; /* 图标大小 */
}

3. 确保样式生效的注意事项 #

• 把这段CSS放在页面的<style>标签里，或者外部样式文件中，位置要在DataTables和SearchPanes的默认样式之后，保证优先级。
• 如果默认样式优先级过高，就用!important强制覆盖，或者使用更具体的选择器（比如加上表格容器的ID：#myTable .dtsp-collapseButton）。

内容的提问来源于stack exchange，提问作者Night