Question

我正在使用DataTables，我需要将排序箭头的颜色从默认（紫色）更改为其他内容。我正在尝试的代码是更改整个标题行颜色，而我只需要图标。有没有其他类，因为下面的代码没有帮助我。

CSS

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
   color : yellow;
}

由于

Answer 1

我明白了。 DataTables正在使用图标作为图标，因此我们不能只是改变飞行中的颜色。为此，我们需要用我们选择的颜色替换图标图像。所以在下面的CSS中，我只是将DataTables中的图像替换为我需要的图像。

table.dataTable thead .sorting_asc {
background-image: url("../images/integration/upArrow.gif");
}

Answer 2

如果您使用的是数据表的引导版本，则添加此CSS即可满足需要

table.dataTable thead .sorting:after, 
table.dataTable thead .sorting_asc:after, 
table.dataTable thead .sorting_desc:after {
  color : yellow;
  opacity: 0.6 !important;
}

根据需要更改颜色和不透明度。默认不透明度为0.2，使图标变暗。

Answer 3

您无法更改数据表中排序图标的颜色，因为它们是非图标，它们是 PNG图片。您需要覆盖这些CSS属性。 （数据表1.10）

升序

table.dataTable thead .sorting_asc {
    background-image: url("/YourImageFolder/sort_asc.png")
}

下降

table.dataTable thead .sorting_desc {
    background-image: url("/YourImageFolder/sort_desc.png")
}

均已禁用

table.dataTable thead .sorting {
    background-image: url("/YourImageFolder/sort_both.png")
}

升序禁用

table.dataTable thead .sorting_asc_disabled {
    background-image: url("/YourImageFolder/sort_asc_disabled.png")
}

降序禁用

table.dataTable thead .sorting_desc_disabled {
    background-image: url("/YourImageFolder/sort_desc_disabled.png")
}

如何更改DataTables中排序箭头的颜色

3 个答案: