prompt text in text field javaFX - css

Question

From JavaFX CSS I want to apply an effect only to the prompt-text without affecting the text in a TextField but do not know how to access that item. I can only change the color with -fx-prompt-text-fill. When I apply an effect to the text the prompt-text it is also affected, why?
.text-field {
-fx-prompt-text-fill: gray;
}
.text-field > .text {
-fx-effect: dropshadow( two-pass-box , blue , .5, 10 , 1 , 1);
}
In the above code also applies shadow to prompt-text what I want to avoid !!

Answer 1

You can style the Prompt text with a stylesheet if you use JFoenix. The CSS-Class is .jfx-text-field and the property -fx-prompt-text-fill.
Example:
.jfx-text-field {
-fx-prompt-text-fill: #989898;
}
If you need other components, look it up: JFoenix GitHub components page

Answer 2

The prompt text only shows when the text field is empty, so the easiest way I can see to do this is to define and "empty" CSS PseudoClass. Set the effect on the text as you want it, and then define the effect for text in an empty text field to be null:
.text-field {
-fx-prompt-text-fill: gray;
}
.text-field .text {
-fx-effect: dropshadow( two-pass-box , blue , .5, 10 , 1 , 1);
}
.text-field:empty .text {
-fx-effect: null ;
}
To make the pseudoclass work, you need to register a listener with the text property in the text field and update it:
TextField textField = new TextField();
textField.setPromptText("Enter text");
PseudoClass empty = PseudoClass.getPseudoClass("empty");
textField.pseudoClassStateChanged(empty, true);
textField.textProperty().addListener((obs, oldText, newText) -> {
textField.pseudoClassStateChanged(empty, newText.isEmpty());
});
Here is a SSCCE (with the CSS code above in prompt-text-styling.css):
import javafx.application.Application;
import javafx.css.PseudoClass;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TextFieldPromptStylingTest extends Application {
#Override
public void start(Stage primaryStage) {
TextField textField = new TextField();
textField.setPromptText("Enter text");
PseudoClass empty = PseudoClass.getPseudoClass("empty");
textField.pseudoClassStateChanged(empty, true);
textField.textProperty().addListener((obs, oldText, newText) -> {
textField.pseudoClassStateChanged(empty, newText.isEmpty());
});
Button okButton = new Button("OK");
VBox root = new VBox(10, textField, okButton);
root.setAlignment(Pos.CENTER);
root.setPadding(new Insets(24));
Scene scene = new Scene(root);
scene.getStylesheets().add("prompt-text-styling.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}