时间戳

首页 > 解决方案 > 选择时更改背景颜色表视图，突出显示持久

css - 选择时更改背景颜色表视图，突出显示持久

问题描述

我想在选择tableView（javafx）时更改它的背景颜色，但我有一条蓝色的小线（与突出显示的颜色相同）出现：示例

这是我的 CSS 代码：

.table-view {
    -fx-faint-focus-color: transparent;
    -fx-focus-color: transparent;
}
.table-view .table-row-cell:selected {
    -fx-body-color: #CEDAE3;
    -fx-background-color: #CEDAE3;
    -fx-text-fill: black;
}
.table-view:focused {
  -fx-background-color: transparent,-fx-box-border,-fx-control-inner-background;
}

你能帮助我吗？

标签： cssjavafx

解决方案

默认样式表modena.css, 有一个规则

.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

这会将-fx-background选定行中单元格中-fx-selection-bar的-fx-table-cell-border-color查找颜色设置为比它亮 20% 的颜色。

根据table-cell这些通过定义其边框颜色

.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}

因此，在选定行的单元格中，您会看到由 定义的右边框-fx-selection-bar。

的默认设置-fx-selection-bar位于样式表顶部附近：

/* A bright blue for highlighting/accenting objects.  For example: selected
 * text; selected items in menus, lists, trees, and tables; progress bars */
-fx-accent: #0096C9;

/* ... */

-fx-selection-bar: -fx-accent;

-fx-accent因此，您可以通过重新定义表格视图来移除此边框：

.table-view {
    -fx-accent: transparent ;
    -fx-faint-focus-color: transparent;
    -fx-focus-color: transparent;
}

推荐阅读