Develop Reference

Why can't I hide the top border of a textfield?

So recently i have been working on a project and I need textfields to get the username and the password of the user.
I have tried using *-fx-background-insets: 0 0 0 0, 0, 0, 0;
to hide the border but the border on top still persists.
Here is the code:
-fx-background: whitesmoke; -fx-background-insets: 0 0 0 0, 0, 0, 0; -fx-background-radius: 0 ;
And here is the result. As you can see the border on top still persists:

Here is a style I got from https://dx.dragan.ba/javafx-textfield-custom-css/. It gets rid of all the borders except the bottom border.
CSS
* {
-fx-primary-color: #007acc;
-fx-secondary-color: #4B6EAF;
-fx-grey-color: #b9b9b9;
-fx-focus-color: -fx-secondary-color;
}
.root{
-fx-background-color: -fx-primary-color, white;
}
.text-field {
-fx-accent: -fx-primary-color;
-fx-background-color: -fx-grey-color, white;
-fx-background-insets: 0, 0 0 1 0;
-fx-background-radius: 0;
}
.text-field:focused {
-fx-background-color: -fx-primary-color, white;
}
Output

JavaFX Pagination button sizes and style

I'm trying to make the JavaFX pagination control look like this:
This is my styling:
.pagination .pagination-control .button, .pagination .toggle-button {
-fx-background-color: -fx-paginator-button;
-fx-border-color: -fx-colour-dark-grey;
}
.pagination .pagination-control .toggle-button:selected {
-fx-background-color: -fx-colour-purple;
}
.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover {
-fx-background-color: -fx-bg-colour-grey;
}
.pagination .pagination-control .left-arrow, .right-arrow{
-fx-background-color: -fx-font-colour-black;
}
.pagination .label {
-fx-text-fill: -fx-font-colour-black;
}
This is the result:
There seems to be an issue with the background colour. when the button is selected its overflowing a little at the bottom and for the arrow buttons the background is not applied to the entire button (If you look very closely at the rightmost arrow button the background colour ends leaving a little white strip). Also how do I increase the size of the buttons(they are mush smaller than the image in reality)? I've tried setting the prefWidth and prefHeight like so with no results
.pagination .pagination-control .button, .pagination .toggle-button {
-fx-background-color: -fx-paginator-button;
-fx-border-color: -fx-colour-grey;
-fx-pref-width: 15;
-fx-pref-height: 15;
}

These selectors should do the basic job:
/* Remove spacing */
.pagination > .pagination-control > .control-box {
-fx-spacing: 0;
}
/* You can control the actual button sizes here */
.pagination > .pagination-control > .control-box > .number-button,
.pagination > .pagination-control > .control-box > .bullet-button,
.pagination > .pagination-control > .control-box > .left-arrow-button,
.pagination > .pagination-control > .control-box > .right-arrow-button {
-fx-background-insets: 0, 1;
-fx-background-color: lightgray, #FAFAFA;
-fx-min-width: 30;
-fx-min-height: 30;
}
/* Colors on hover */
.pagination > .pagination-control > .control-box > .number-button:hover,
.pagination > .pagination-control > .control-box > .bullet-button:hover,
.pagination > .pagination-control > .control-box > .left-arrow-button:hover,
.pagination > .pagination-control > .control-box > .right-arrow-button:hover {
-fx-background-insets: 0;
-fx-background-color: lightgray;
}
/* Selected toggle color */
.pagination > .pagination-control > .control-box > .number-button:selected,
.pagination > .pagination-control > .control-box > .bullet-button:selected{
-fx-background-insets: 0;
-fx-background-color: #58379A;
-fx-text-fill: white;
}
to have a result like:
All the buttons have a fixed size, the spacing is removed and the selected/hovered toggle button has the borderless color.
Additionally, if you want to control also the text size inside the buttons, you can update the following selector as:
/* Remove spacing and control font size */
.pagination > .pagination-control > .control-box {
-fx-spacing: 0;
-fx-font-size: 12;
}
Furthermore you can control also the text size of the page information like:
.pagination > .pagination-control {
-fx-font-size: 8;
}
Or you can even hide it:
.pagination {
-fx-page-information-visible: false;
}
to have a result of:

The problem is that the -fx-pref-width or height are not been applied cause they are handled by their parent layout ( at least I think so ) in order to force the changes you need to set the min width and height instead of preferred.
Here is my css :
.pagination > .pagination-control > .control-box > .number-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination > .pagination-control > .control-box > .left-arrow-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination > .pagination-control > .control-box > .right-arrow-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination .pagination-control .toggle-button:selected {
-fx-background-color: purple;
}
.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover {
-fx-background-color: grey;
}
Consider have a look at modena.css for more information.

JavaFx - increase space between text and tab header area edge

I can't understand what element I should work to do this task. I tried
.tab-header-area .tab{
-fx-background-color:red;
-fx-padding:30px;
}
EDIT 1
This is what I get
But I have the same tab header inside big red rectangle. How can I increase distance between text and edge of the tab header area? By other words - how can I make tab header bigger with the same font size?
EDIT 2
When I do
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}
I get:
But I need (sorry, it's gimp,not photoshop)

If you want a border around the tab (not the label), you have to use this:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-background-color: red;
-fx-padding: 20px;
-fx-border-color: black;
-fx-border-width: 1px;
}
If you want to manipulate the tab-container (where the label is in) itself you need this:
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container{
-fx-border-color: black;
-fx-border-width: 1px;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
UPDATE
Default for a selected tab is that:
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 1, 1;
-fx-border-color: -fx-focus-color, -fx-faint-focus-color;
-fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
-fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
And this it how it goes:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
-fx-padding: 20px;
-fx-background-color: red;
-fx-border-width: 1px;
-fx-border-color: black;
}
.tab-pane > .tab-header-area > .headers-region >.tab:selected .focus-indicator{
-fx-border-width: 0px;
}
Look at the modena.css (default JavaFX stylesheet) file for info on things to change.
Font size will not change dynamic, you have to take care of font size with a listener on size/width/height property of the tab (in relation to font size).
And there are a lot of pseudo tags like .tab:selected .tab:top etc. So be aware of this kind of things if you want the default behavior only with new design.
And finally have a look at css selectors, you missed the descending selectors ('>'): http://www.w3schools.com/cssref/sel_element_gt.asp

It's not really clear what you are looking for... maybe
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;
public class TabPaneStyleTest extends Application {
#Override
public void start(Stage primaryStage) {
TabPane tabPane = new TabPane();
Tab tab1 = new Tab();
tab1.setGraphic(new Label("tab 1"));
Tab tab2 = new Tab();
tab2.setGraphic(new Label("tab 2"));
tabPane.getTabs().addAll(tab1, tab2);
Scene scene = new Scene(tabPane);
scene.getStylesheets().add("tab-pane-big-tabs.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
with the css file
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}

Javafx - combo-box text-field bg color

I've googled and searched in SO but unfortunately, I didn't find the way how to make a Non-Editable combobox contain a textfield with white background via css.
In other words, how do I make a Non-Editable combobox appear like an Editable combobox (i.e. the same focus, arrow button, etc)?
The code:
.combo-box .text-field{
-fx-background-color: white;
}
doesn't work.
Can anyone help?

You can just add this css:
.combo-box > .list-cell{
-fx-background-color: -fx-outer-border, white;
-fx-background-insets: 1 -3 1 1, 1 -2 1 1 ;
}
But to get all the styles from edditable combobox you have to find .combo-box-base:editable from /jfxrt.jar!/com/sun/javafx/scene/control/skin/modena/modena.css and replace .text-field with .list-cell, because only editable combobox has .text-field
.combo-box > .arrow-button {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;
-fx-background-radius: 3px, 3px, 2px, 1px;
-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */
-fx-text-fill: -fx-text-base-color;
-fx-alignment: CENTER;
-fx-content-display: LEFT;
}
.combo-box > .arrow-button{
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 1 1 1 0, 1, 2;
-fx-background-radius: 0 3 3 0, 0 2 2 0, 0 1 1 0;
}
.combo-box > .list-cell {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 1 0 1 1;
-fx-background-radius: 2 0 0 2;
}
.combo-box:contains-focus {
-fx-background-color: -fx-focus-color;
-fx-background-insets: -0.2;
-fx-background-radius: 3;
}
.combo-box:focused > .list-cell{
-fx-background-color:
-fx-control-inner-background,
-fx-faint-focus-color,
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 1 0 1 1, 1 0 1 1, 3 2 3 3;
-fx-background-radius: 2 0 0 2, 1 0 0 1, 0;
}
.combo-box :contains-focus > .arrow-button{
-fx-background-color: -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
-fx-background-insets: 1, 2, 1, 2.6;
-fx-background-radius: 0 2 2 0, 0 1 1 0, 0 1 1 0, 0 1 1 0;
}
And here is the result:
1-st box styled with just 2 lines
2-nd has testComboBox2.setEditable(true);
3-d styled with big css from default styles.

I'm not sure if this is what you want because I can't imagine well "not editable combobox with a textfield" but maybe a comma between them?
.combo-box, .text-field{
-fx-background-color: white;
}
This is my output:
Is this what you are looking for?

I needed this for a project. I hope you haven't been smashing your head against it as long as I did...
.combo-box:disabled, .combo-box:disabled > .text-field {
-fx-opacity: 1.0;
}
Then, if your ComboBox is disabled, it will look normal, but you can not engage the drop down or type into the editable text field.

Can mark be extended outside checkbox in JavaFX using CSS?

I want to make a custom checkbox, but my mark is limited by box size. Is there a way to extend it outside bounds?
CSS code for checkbox:
.check-box{
-fx-font-family: "Segoe UI Light";
-fx-font-size: 18;
-fx-text-fill:#01449f;}
.check-box .box{
-fx-outer-border: #cadbec;
-fx-body-color: white;
-fx-background-color:
-fx-outer-border,
-fx-body-color;
-fx-background-insets: 0, 1;
-fx-background-radius: 2px, 0px;}
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";}
.check-box:selected .mark {
-fx-background-color: #0181e2;}

You can scale the graphic:
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";
-fx-scale-x: 2;
-fx-scale-y: 2;
}
EDIT
To move the tick, you can translate it:
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";
-fx-scale-x: 2;
-fx-scale-y: 2;
-fx-translate-x: 5px;
-fx-translate-y: -3px;
}