Question

我正在尝试更改Tabulator列标题中的排序箭头颜色。尝试了以下所有组合：

.tabulator .tabulator-header .tabulator-col .tabulator-arrow

但是仍然无法改变颜色吗？

Answer 1

这是因为它是CSS箭头，所以实际上它是您需要更改的边框颜色，您可以通过多种方法来实现。

SCSS

如果要使用SCSS更新实际的源文件，则可以更新tabulator.scss文件中的几个变量，然后运行gulp获取CSS文件的更新版本

//column header arrows
$sortArrowActive: #666 !default;
$sortArrowInactive: #bbb !default;

CSS

如果您只想覆盖现有样式，则需要在几个地方进行颜色调整（确保在包含样式表之后执行此操作）：

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #bbb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #bbb;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
  border-bottom: 6px solid #666;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
  border-top: 6px solid #666;
}

#666和#bbb的值分别与有效值和无效值相关

Answer 2

在最新版本中，您似乎需要包含border-top和border-bottom属性，或者同时获得上箭头和下箭头。

尝试这些具有原色的示例，以了解其工作原理。

    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow {
        background-color: red;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
        border-top: none;
        border-bottom: 6px solid green;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
        border-top: none;
        border-bottom: 6px solid blue;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
        border-top: 6px solid orange;
        border-bottom: none;
    }

如何在制表符中更改排序箭头的颜色

2 个答案:

SCSS

CSS