如何使用 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 包含 ToggleButtons，因此您必须使用 .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 中找到它

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

how do I change the border of controlsfx SegmentedButton with CSS?

css

java

javafx

controlsfx