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 !!
In this article, we show how to add prompt text to a text field in JavaFX. A prompt text is text that appears in a text field when it is first load but that disappears when a user starts typing into the text field.
To create a text field you need to instantiate this class, to the constructor of this class. It inherits a property named text from its superclass TextInputControl. This property holds the contents of the current text field. You can retrieve this data using the getText() method.
To add a text object to your application, use any of the constructors shown in Example 1 through Example 3. Text t = new Text (10, 20, "This is a text sample"); You can also create text objects by using the javafx. scene.
You can use following statement in order to make text-area object non-editable with auto scrollbar: textAreaObjectName. setEditable(false);
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
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);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With