JavaFX - Button上的左边框没有移动文本或调整其大小

Question

我想创建一个Button。在开始时它没有边框，只是背景颜色。所以我设置以下CSS属性：

.button, .toggle-button { 
    -fx-background-color: #373e48; 
    -fx-background-radius: 0; 
} 

当按下Button /选择，左侧边框应该会出现，所以我加了这一点：

.button:pressed, .toggle-button:selected { 
    -fx-border-color: #ee543a; 
    -fx-border-width: 0 0 0 2px; 
} 

但问题是，每次显示边框时，Button都会变宽一点。

我也尝试将对齐方式设置为center-right，并添加最小宽度，但如果Button变大，则不再起作用。它确实不像我想要的那样。

那么，没有这种行为我该怎么做？优选地，文本与中心对齐。

Answer 1

您可以简单地使用CSS属性-fx-background-insets做到这一点：

.button, .toggle-button { 
    -fx-background-color: #373e48; 
    -fx-background-radius: 0; 
    -fx-text-fill: white; 
} 

.button:pressed, .toggle-button:selected { 
    -fx-background-color: #ee543a, #373e48; 
    -fx-background-insets: 0, 0 0 0 2; 
} 

特第二选择创建两种颜色的两层。原始背景颜色在左侧获得2像素插图，因此底层（“边框”的颜色）将显示为左侧的2像素边框。

仔细看看这个选择器：-fx-background-insets: 0, 0 0 0 2;第一个（底层）背景颜色没有插入。顶部的颜色在左侧有2个像素插入，因为四个数字表示top, right, bottom, left。

注：文本对齐是不必要的，作为一个Button默认文本对齐或ToggleButton为中心，但在任何情况下，你可以从CSS也对齐文本：

.button, .toggle-button { 
    -fx-text-alignment: center; //* or left, right, justify *// 
}