[英]JavaFX ComboBox CSS style
我正在使用JavaFX + FXML构建一个小应用程序,我正在尝试实现一些简单的CSS以具有特定的样式。
我有一个Combobox元素的问题。 确实,默认情况下它的颜色为灰色:
我希望它具有白色(或透明),并保持边框,以匹配与文本字段相同的样式。 所以我尝试将背景颜色设置为透明但有副作用:边框也变得透明!
这是我添加的CSS:
.root {
-fx-font-size: 11pt;
-fx-font-family: "Verdana";
-fx-background: #FFFFFF;
}
.normal-label {
-fx-text-fill: #005EB8;
}
.normal-text-field {
-fx-text-fill: #333333;
}
.combo-box {
-fx-background-color: transparent;
}
我根本不习惯CSS写作,所以也许我完全错过了一些东西。 是不是组合框没有定义边界? 所以我必须覆盖边框并找出文本字段的边框是什么?
ComboBox
从ComboBoxBase
继承其CSS样式 。
ComboBox控件具有ComboBoxBase的所有属性和伪类。
ComboBoxBase
的默认CSS样式类定义为:
.combo-box-base {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
-fx-text-fill: -fx-text-base-color;
-fx-alignment: CENTER;
-fx-content-display: LEFT;
}
您可以覆盖此样式类,如:
.combo-box-base {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, white;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
}
这个样式类只是将内部部分设置为白色,边框实际上是不变的(删除最后两个属性然后你将获得一个纯白色无边框ComboBox
)。
注意:
如果仅使用ComboBox
则覆盖.combo-box-base
或.combo-box
样式类是等效的。
回答使用.combo-box-base
样式而不是另一个样式的原因是还有其他控件继承了.combo-box-base
style样式类,例如ColorPicker
和DatePicker
。 覆盖.combo-box-base
所有这些控件共享相同的样式,从而产生更加统一的设计。
您可以添加以下属性来控制边框:
-fx-border-color: #D3D3D3
-fx-border-width: 1 1 1 1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.