如何使用CSS更改controlsfx SegmentedButton的边框？

Question

SegmentedButton

我正在尝试向ControlsFX SegmentedButton添加边框。当我更改背景颜色时，它们将保持正确的形状，如上图所示。

这是CSS：

.segmented-button{
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-background-color:  -color-background-light-purple;
}

.segmented-button:selected{
    -fx-background-color: -color-heading-dark-blue;
    -fx-text-fill: white; 
 }

但是当我尝试添加边框时，该形状未遵守。 SegmentedButton with Border

这是CSS：

.segmented-button{
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-background-color:  -color-background-light-purple;
    -fx-border-color: -color-heading-dark-blue;
    -fx-border-width: 0.2;
}

有人可以告诉我如何添加边框以将每个按钮的形状保持在SegmentedButton内吗？

Answer 1

ControlsFX-SegmentedButton包含ToggleButton，因此您必须使用.segmented-button .toggle-button {...}将样式分配给ToggleButton。

例如：

 .segmented-button .toggle-button {
     -fx-background-color: derive(STEELBLUE,30%);
     -fx-border-color: derive(STEELBLUE,0%);
     -fx-border-width: 2;
 }

 .segmented-button .toggle-button:selected,
 .segmented-button .toggle-button:focused {
     -fx-background-color: derive(STEELBLUE,-10%);
     -fx-border-color: derive(STEELBLUE,-40%);
     -fx-border-width: 2;
     -fx-text-fill: WHITE;  
 }

导致：

该部分

 .segmented-button {
     -fx-background-color: derive(ORANGE,30%);
     -fx-border-color: derive(ORANGE,0%);
     -fx-border-width: 10
 }

仅对SegmentedButton（即容器）本身进行样式设置：

编辑：

您可以通过

来区分左键，中间键和右键

.segmented-button .toggle-button.left-pill {...}

.segmented-button .toggle-button.center-pill {...}

.segmented-button .toggle-button.right-pill {...}

按钮的其他样式（例如，圆角）。可以使用-fx-background-radius正常设置半径。这样可以使外部按钮（与您的按钮类似）带有圆角的以下样式：

ControlsFX的SegmentedButton.css是自定义样式的一个很好的蓝图。您可以在org \ controlsfx \ control \ segmentedbutton.css的controlsfx-9.0.0.jar中找到它。