Develop Reference

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

Style Layout Panes in CSS with JavaFX FXML without creating a variable?

I'm working with JavaFX FXML, and I'm having a bit of trouble styling my app with CSS.
I have a GridPane on my root node, and I'd like to style it's background. The GridPane itself was never mentioned in the Java code (#FXML) because it didn't have to - it was never used at all in the code.
However, I'm styling the app now and all I can get from Oracle's Official Guide of Styling Layout Panes with CSS is that I'll have to create a variable like so: GridPane grid = new GridPane(); and then proceed to assign the variable a style, like so:
.grid {
-fx-background-color: white;
-fx-background-radius: 5.0;
-fx-background-insets: 0.0 5.0 0.0 5.0;
-fx-padding: 10;
-fx-hgap: 10;
-fx-vgap: 10;
}
And then proceed to add the style to it, like so: grid.getStyleClass().add("grid");.
This is an unfeasible solution for me as I have multiple GridPanes in multiple scenes throughout the project, and I can't have to manually create a variable for all of them.
Is there a solution similar to styling a button?
A button can be styled without requiring to create a variable for it, and it will automatically style all buttons on the scene, like so:
.button{
-fx-text-fill: rgb(49, 89, 23);
-fx-border-color: rgb(49, 89, 23);
-fx-border-radius: 5;
-fx-padding: 3 6 6 6;
}

GridPane doesn't have a own style class (see CSS reference), but similarly to tag selectors in HTML, Nodes can be selected by their java classes:
GridPane {
-fx-background-color: white;
-fx-background-radius: 5.0;
-fx-background-insets: 0.0 5.0 0.0 5.0;
-fx-padding: 10;
-fx-hgap: 10;
-fx-vgap: 10;
}
Furthermore is is possible to add style classes from FXML since styleClass is a Read-Only List Property:
Short form for a single style class:
<GridPane styleClass="grid">
...
Long form for multiple style classes:
<GridPane>
<styleClass>
<String fx:value="grid"/>
<String fx:value="myclass"/>
</styleClass>
...
It is also possible to add style classes from the properties view in SceneBuilder.

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 Embed Custom Font Not Working

I'm using JavaFX version 8.0.40-b27 and trying to embed a custom/external font via CSS. I've also tried programmatic approaches, all of which have failed. A System.out.print of "font" returns null, which I suspect to be the cause.
Java:
Font font = Font.loadFont( Main.class.getClassLoader().getResourceAsStream( "application/stratum.ttf"), 10);
System.out.println(font); // Prints "null"
nowPlayingTitle.setFont(font);
CSS:
#font-face {
font-family: stratum;
src: url('stratum.ttf');
}
.text{
-fx-font-family: "stratum", "Segoe UI Light";
-fx-font-weight: 100;
-fx-text-fill: white;
}
Directory:
http://i.stack.imgur.com/c92ii.png
EDIT:
System.out.println(font); now prints Font[name=StratumNo1-Thin, family=StratumNo1, style=Thin, size=10.0], so the file is being accessed correctly. However the font is still not being rendered on screen: http://i.stack.imgur.com/bueUk.png

For the URL in Java code, try either
// relative to classpath, with leading /
Font font = Font.loadFont( Main.class.getClassLoader().getResourceAsStream( "/application/stratum.ttf"), 10);
or
// relative to class:
Font font = Font.loadFont( Main.class.getClassLoader().getResourceAsStream( "stratum.ttf"), 10);
The CSS looks right to me... are you sure your ttf file is being deployed along with the compiled code as css, etc?

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 { }