当我通过prompt-text
或直接通过setStyle()
更改CSS
的颜色时,当我单击TextField
时,首先,它不会t会自动清除它,因此,要在字段中写入内容时,通常弹出的“栏”一直位于左侧-如以下图片所示:
Username TextField
被聚焦,其prompt-text
的颜色变为#000000
(黑色)。Password TextField
被聚焦,它具有默认的prompt-text
设置。一切都没有改变。我浏览了JavaFX API文档,关于TextFields
的大量StackOverflow案例,其他论坛上的CSS案例,modena.css
(.text-input
)等等。我从未见过有人遇到像我这样的问题,该提议的解决方案对我有用。
在大多数情况下,人们建议使用-fx-prompt-text-fill: transparent;
,但这会使所有prompt-texts
都空着,无论他们是否专注。
我也尝试过text-input Class
的一些变化:
.text-input, .text-input:focused {
-fx-prompt-text-fill: derive(-fx-control-inner-background, 0%);
}
.text-input .text-input:focused {
-fx-prompt-text-fill: transparent;
}
.text-input, .text-input:focused {
-fx-prompt-text-fill: transparent;
}
我花了8到10个小时寻找并试图找到解决方案,但是我对JavaFX / CSS的了解还不够。一些帮助将不胜感激。
编辑1:
.text-input {
-fx-prompt-text-fill: <your-color>;
}
.text-input:focused {
-fx-prompt-text-fill: transparent;
}
这可行,但是它适用于所有TextFields
。不是要寻找的特定对象。
#myId {
-fx-prompt-text-fill: <your-color>;
}
#myId:focused {
-fx-prompt-text-fill: transparent;
}
只要我保持原样,这也有效。当我单击仅执行以下操作的按钮:txtUsername.setStyle("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");
时,颜色会更改,但随后似乎会忽略myId:focused
。好像不在那里。
.my-styleclass {
-fx-prompt-text-fill: <your-color>;
}
.my-styleclass:focused {
-fx-prompt-text-fill: transparent;
}
这同样有效,但是当我应用上述setStyle()
时,会发生与使用ID
时相同的事情。它会忽略CSS中的focused
部分。
我发现此示例适用于绑定。
txtUsername.styleProperty().bind(Bindings.when(txtUsername.focusedProperty())
.then("-fx-prompt-text-fill: transparent;")
.otherwise("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";"));
它确实可以实现我想要的功能,但是我想避免使用它,并且尽可能地设置CSS的样式。
为什么?我正在尝试制作人们可以自定义的应用程序。我希望它们能够更改应用程序某些部分的颜色,而prompt-text
中的TextField
是其中之一。我使用setStyle()
来应用更改,以便他们可以预览。单击“保存”后,所有应用的样式都将保存在.css
文件中,然后程序将在重新启动stylesheet
后加载该文件。
编辑2:找到了解决方案here.
CSS:
.root{
username-prompt-text-fill: #000000;
}
#txtUsername{
-fx-prompt-text-fill: username-prompt-text-fill;
}
#txtUsername:focused{
-fx-prompt-text-fill: transparent;
}
JAVA:
txtUsername.setStyle("username-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");
答案 0 :(得分:2)
使用以下CSS自定义提示文本填充,同时使其在聚焦时仍消失:
.text-input {
-fx-prompt-text-fill: <your-color>;
}
.text-input:focused {
-fx-prompt-text-fill: transparent;
}
如果要定位到特定的TextField
,请为其指定ID并在CSS文件中定位该ID。
textField.setId("myId");
#myId {
-fx-prompt-text-fill: <your-color>;
}
#myId:focused {
-fx-prompt-text-fill: transparent;
}
如果许多TextField
应该具有相同的样式,请考虑为它们全部提供一个自定义样式类。
textField.getStyleClass().add("my-styleclass");
.my-styleclass {
-fx-prompt-text-fill: <your-color>;
}
.my-styleclass:focused {
-fx-prompt-text-fill: transparent;
}
注意:id
/ style类也可以通过FXML设置/添加。如果仅使用fx:id
,则id
将是相同的值,否则id
用于CSS,fx:id
用于字段注入。 >
有关更多信息,请参见JavaFX CSS Reference Guide。
答案 1 :(得分:1)
this question和 Slaws'答案中的解决方案帮助我找到了解决问题的方法。
CSS:
.root{
username-prompt-text-fill: <color>;
}
#txtUsername{
-fx-prompt-text-fill: username-prompt-text-fill;
}
#txtUsername:focused{
-fx-prompt-text-fill: transparent;
}
JAVA:
txtUsername.setStyle("username-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");