Develop Reference

JavaFX - TextField prompt text doesn't get deleted upon focus after changing color

When I change the color of the prompt-text, either via setStyle() or directly through CSS, when I click on the TextField, first of all, it won't auto-clear it and because of it, the "bar" that usually pops when you're about to write in a field is all the way to the left - as you can see in the following pictures:
In the first picture the Username TextField is focused, which has its prompt-text color changed to #000000 (black).
In the second picture the Password TextField is focused, which has default prompt-text settings. Nothing is changed about it.
I looked through the JavaFX API Documentation, numerous StackOverflow cases about the TextFields in general, CSS cases on other forums, the modena.css (.text-input) and so on. I haven't seen anywhere someone with a problem like mine where the solution proposed has worked for me.
In most cases people suggest to use -fx-prompt-text-fill: transparent;, but that makes all of prompt-texts everywhere empty regardless of whether they're focused or not.
Some of the variations I tried as well for the text-input Class are these:
.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;
}
I've spent 8-10h looking and trying to figure out a solution, but I'm just not knowledge-able enough about JavaFX/CSS. Some help would be really appreciated.
EDIT 1:
.text-input {
-fx-prompt-text-fill: <your-color>;
}
.text-input:focused {
-fx-prompt-text-fill: transparent;
}
This works, but it's applied to all TextFields. Not to a specific one, which is what I'm looking for.
#myId {
-fx-prompt-text-fill: <your-color>;
}
#myId:focused {
-fx-prompt-text-fill: transparent;
}
This also works, as long as I leave it as is. When I click a button that does only this: txtUsername.setStyle("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");, the color changes but then it seems to ignore the myId:focused. Like it's not there.
.my-styleclass {
-fx-prompt-text-fill: <your-color>;
}
.my-styleclass:focused {
-fx-prompt-text-fill: transparent;
}
This works as well, but when I apply the above mentioned setStyle(), the same thing as when working with the ID happens. It ignores the focused part in the CSS.
I found this example that works with bindings.
txtUsername.styleProperty().bind(Bindings.when(txtUsername.focusedProperty())
.then("-fx-prompt-text-fill: transparent;")
.otherwise("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";"));
It does exactly what I want it to do, but I'd like to avoid using it and only styling the CSS if possible.
Why? I'm trying to make an application that people can customize. I'd like them to be able to change colors of certain parts of the application and the prompt-text of TextField is one of them. I use setStyle() to apply changes so they can preview it. Once they click "Save", all of the applied styles are to be saved in a .css file and then the program will load that file as it's stylesheet once restarted.
EDIT 2: Found a solution 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) + ";");

Use the following CSS to customize the prompt text fill while still having it disappear when focused:
.text-input {
-fx-prompt-text-fill: <your-color>;
}
.text-input:focused {
-fx-prompt-text-fill: transparent;
}
If you want to target a specific TextField, give it an ID and target the ID in the CSS file.
textField.setId("myId");
#myId {
-fx-prompt-text-fill: <your-color>;
}
#myId:focused {
-fx-prompt-text-fill: transparent;
}
If many TextFields should have the same style, consider giving them all a custom style class.
textField.getStyleClass().add("my-styleclass");
.my-styleclass {
-fx-prompt-text-fill: <your-color>;
}
.my-styleclass:focused {
-fx-prompt-text-fill: transparent;
}
Note: The id/style classes can be set/added via FXML as well. If you use fx:id only, the id will be the same value, otherwise id is used for CSS and fx:id is used for field injection.
For more information, see JavaFX CSS Reference Guide.

The solution in this question and Slaws' answer helped me get to the solution of my problem.
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) + ";");

JavaFX how to remove the borders from button

https://i.stack.imgur.com/Y76Fl.png
On this picture on left side - running java program, and right side - Scene builder layout.
This is my github code: https://github.com/captsmile/calc

You can do the following code in .css file
.button
{
-fx-background-color: transparent;
}
This will make the color of button as the color of your application's background color(due to transparency).
Furthermore you may also apply some effects to make your button looks more cool. To add effects
.button:hover
{
-fx-background-color: yellow;
}
.button:pressed
{
-fx-background-color: brown;
}
At the end ,you may attach the case file with your file(suppose index.java file in which you want to apply css) by writing following code in your index.java
scene.getStylesheets().add(getClass().getClassLoader().getResource("application.css").toExternalForm());
Where application.css is the css file with whole css code given above . This application file must be present in your src folder.

I fixed this removing border at GridPane
.root{
-fx-padding: 5;
-fx-border-style: none;
-fx-border-width: 0;
-fx-border-insets: 0;
}

This is how you can do it in scenebuilder
Choose the button by clicking on it.
Then in properties->Style
Choose "-fx-background-color"
and put value as " transparent"
Like this

You can do it by JavaFX CSS selectors on the button.
The answer in this link check it out, and there are also many JavaFX related examples you may interested in:
http://tutorials.jenkov.com/javafx/button.html

JavaFX HyperLink focus rectangle default style

Is there an easy way to change that ugly dashed-line focus rectangle on a focused Hyperlink to something else? Either a solid line, maybe change the background color instead, etc.? (I need focus indicator functionality, just want to change it a little.)

The default settings for .hyperlink:focused in modena.css are
.hyperlink:focused {
-fx-border-color: -fx-focus-color;
-fx-border-style: segments(0.166667em, 0.166667em);
-fx-border-width: 1px;
}
So something like
.hyperlink:focused {
-fx-border-color: null ;
-fx-border-style: solid ;
-fx-border-width: 0px;
-fx-underline: true ;
}
in an external CSS file should work. (You could use -fx-background-color: something ; to change the background...)

How to completely remove TextArea Vertical ScrollBar [duplicate]

I have a TextArea() and would like to hide the vertical/horizontal scroll bars. I see that the control seems to have a built in scroll-pane that shows as needed.
TextArea numberPane = new TextArea();
numberPane.setEditable(false);
numberPane.setMaxWidth( 75 );
// Set the characteristics of our line number pane
numberPane.setId( "line-number-pane" );
In my CSS file I have the follow settings.
#line-number-pane
{
-fx-text-fill: white;
-fx-background-color: black;
-fx-font: 12px "Courier New";
-fx-font-family: "Courier New";
-fx-font-weight: bold;
}
#line-number-pane .scroll-pane
{
-fx-hbar-policy : never;
-fx-vbar-policy : never;
}
As expected the text area font/color/size works just fine. However, the scroll-pane policy doesn't seem to work.
Should I be able to hide the scroll bars via the CSS file or is there some code that will do the trick.
Thanks.

From How can I hide the scroll bar in TextArea?:
Remove Horizontal Scrollbar
textArea.setWrapText(true);
Remove Vertical Scrollbar
ScrollBar scrollBarv = (ScrollBar)ta.lookup(".scroll-bar:vertical");
scrollBarv.setDisable(true);
CSS
.text-area .scroll-bar:vertical:disabled {
-fx-opacity: 0;
}

I just did it very simply using a StyleSheet:
CSS
.text-area .scroll-bar:vertical {
-fx-pref-width: 1;
-fx-opacity: 0;
}
.text-area .scroll-bar:horizontal {
-fx-pref-height: 1;
-fx-opacity: 0;
}
No need for all that whacky code.

I observed code of TextAreaSkin class, and found, that a
void layoutChildren(x, y, w, h) method, which is called "during the layout pass of the scenegraph" and de facto, each time, when something happens with a control, contains a code, which changes hbarPolicy and vbarPolicy between AS_NEEDED and NEVER, according to the current state of control.
So, looks like, there is no chance to do somethign with it, using a css.
Try to just make scrollbars invisible. But, as I see code of ScrollPaneSkin, scrollBars are created once, but their visibility state seems to change during the control is working, so, instead of using setVisible(false) (which will be ignored in the nearest layout), try to use a setOpacity(0.0). (I'm not sure, it will work, but it worth to try).
Also, instead of CSS using, you can apply a recursive search of scrollBars in a control structure, using a Parent.getChildrenUnmodifiable() method, and make them invisible manually.

JavaFX CSS styling of TextArea does not work

I'm writing a simple JavaFX application, but I can't get some of the CSS styling to work.
The problem is the -fx-background-color property for my TextArea.
This is the relevant CSS:
.text-area {
-fx-font-family: Consolas;
-fx-highlight-fill: #00ff00;
-fx-highlight-text-fill: #000000;
-fx-text-fill: #00ff00;
-fx-background-color: #000000;
}
All the fields perform as expected, except -fx-background-color, which apparently does nothing. I still have the default white background. As you can see in the picture, the TextField below, which has identical CSS, but does apply the background color as expected.
Picture of my problem
Any clues?

You need to set the content:
.text-area .content{
-fx-background-color: black;
}
...
Or see this answer maybe: Transparent background of a textarea in JavaFX 8

I had the same problem: What I did:
Created a .css file called console.css with following content:
.text-area {
-fx-font-family: Consolas;
-fx-font-size: 15;
-fx-text-fill: #ffffff;
-fx-display-caret:true;
}
.text-area .content {
-fx-background-color: #000000;
}
On my scene called:
scene.getStylesheets().add(this.getClass()
.getResource("/stylesheets/console.css").toExternalForm());
Explanation:
The second part just loads the css stuff. (trivial)
The fist part (css): You have to check which property has to be applied on which part of the object. For instance: -fx-font-family is on .text-area but -fx-background-color is on .content. Understanding this concept let you understand all of the css stuff in JavaFx.
JavaFX-CSS-Docu
(recommended).
Good programming :-)

Are you using scene builder?
I tried the same css you use and everything works fine, maybe it's a bug in your version.
I tested it for text-area and text-field.

You should use -fx-control-inner-background for example for a TextArea with id=textAreaField:
#textAreaField {
-fx-control-inner-background: #000000;
-fx-text-fill: #ffffff;}
and you can for more information, see this topic:
Textarea javaFx Color

In JavaFx ,TextArea has two substuctures (Content & scrollPane) ,for each structure has all properties of TextInputControl :
text-area{ }
text-area .content { }
text-area.scroll-pane { }