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 TabPane CSS : delete blue selection zone

I'm looking for deleting the blue selection zone around a selected tab in JavaFX CSS.
Here is my problem
And my CSS :
.tab-pane .tab-header-area .tab-header-background {
-fx-opacity: 0;
}
.tab-pane
{
-fx-tab-min-width:88px;
}
.tab-pane .tab
{
-fx-background-color: gray;
-fx-background-insets: 0 1 0 1,0,0;
}
.tab-pane .tab:selected
{
-fx-background-color: #f10707;
}
.tab .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: white;
-fx-font-size: 14px;
-fx-font-family: "Arial Rounded MT Bold";
}
.tab:selected .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: white;
}
Any help is appreciated.

Try
.tab-pane:focused .tab:selected .focus-indicator {
-fx-border-width: 0 ;
-fx-border-color: transparent;
-fx-border-insets: 0;
-fx-border-radius: 0;
}

How to flip axis of javafx slider

I'm creating rulers using javafx by modifying css of javafx slider and I created something like this:
And I was trying to make this:
So I tried to rotate sliders by calling setRotate() method but it becomes like this:
Here is my code for sliders:
Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.setRotate(180);
Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.setRotate(180);
And here is my css code for sliders:
.slider > .thumb,
.slider > .thumb:hover,
.slider:focused > .thumb{
-fx-background-color: #ff6a6a;
-fx-background-insets: 2 0 -23 0;
-fx-padding: 1 1 0 1;
-fx-background-radius: 0;
}
.slider:vertical > .thumb,
.slider:vertical > .thumb:hover,
.slider:vertical:focused > .thumb{
-fx-background-color: #ff6a6a;
-fx-background-insets: 0 -23 0 2;
-fx-padding: 1 0 1 1;
-fx-background-radius: 0;
}
.slider > .track,
.slider:vertical > .track {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0;
}
.slider > .axis {
-fx-tick-mark-stroke: transparent;
-fx-tick-label-font-size: 0.833333em;
-fx-tick-label-fill: #9a9a9a;
-fx-background-color: #333;
}
Please suggest me how can I flip axis or rotate labels of these slider so that I can achieve expected results.

Basically, you have to set the side property of the axis (for left and top). The steps that are involved:
let the slider have a custom style, f.i. axis-top/axis-left
in css, define a rule for the axis contained in such a slider to set its side to top/left
The code:
Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.getStyleClass().add("axis-top");
Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.getStyleClass().add("axis-left");
In css:
.slider.axis-top > .axis {
-fx-side: TOP;
}
.slider.axis-left > .axis {
-fx-side: LEFT;
}
This can certainly be optimized, but should get you started.

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.