How to Change the Background Color of a Textfield Without Changing the Border in Javafx

How do you change the background color of a TextField without changing the border in javafx?

I found that you can construct a string of css code out of a string and a variable by using the to string method and the substring method like this:

colorBox0
.setStyle("-fx-control-inner-background: #"+value0.toString().substring(2));

JavaFX TextArea & TextField display different colors

My colleague managed to solve it with the following lines of code for the TextField:

-fx-background-color: rgba(255,255,0,.5); 
-fx-border-color: derive(-fx-text-box-border, -10%);
-fx-border-radius: 2;

Turns out one should use -fx-background-color for TextFields and -fx-control-inner-background for TextAreas. The more you know.

Why -fx-border-color reset border radius of TextField?

The default stylesheet applies borders to text fields (and almost all other controls) by using "nested backgrounds" instead of borders.

Some of the settings for the TextInputControl from the default stylesheet are:

-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: 0, 1;
-fx-background-radius: 3, 2;

This basically sets two background colors (both defined by a linear gradient), one (the "outer" one) with a color based on -fx-text-box-border, and the other with a color based on -fx-control-inner-background. The "outer" background is outside the "inner" background because they have insets of 0 and 1, respectively; the curved edge to the resulting apparent border is created by having radii of 3 and 2 for each background, respectively.

This is, anecdotally at least, far more efficient than using actual borders in the CSS, so this choice of technique is for performance reasons.

So to preserve the radius for the border, you can use the same technique, and just override the two background colors:

.validation-error {
    -fx-background-color: #DBB1B1, #FFF0F0 ;
 }

Note that you can also just replace the "looked-up-colors", which would also preserve the subtle linear gradients being used:

.validation-error {
    -fx-text-box-border: #DBB1B1 ;
    -fx-control-inner-background: #FFF0F0 ;
  }

For highlighting when focused, the default uses colors named -fx-focus-color and -fx-faint-focus-color: so in the latter version you would probably want to redefine those too:

.validation-error {
    -fx-text-box-border: #DBB1B1 ;
    -fx-control-inner-background: #FFF0F0 ;
    -fx-focus-color: #FF2020 ;
    -fx-faint-focus-color: #FF202020 ;
  }

How to change the color of text in javafx TextField?

The CSS styles for text input controls such as TextField for JavaFX 8 are defined in the modena.css stylesheet as below. Create a custom CSS stylesheet and modify the colors as you wish. Use the CSS reference guide if you need help understanding the syntax and available attributes and values.

.text-input {
    -fx-text-fill: -fx-text-inner-color;
    -fx-highlight-fill: derive(-fx-control-inner-background,-20%);
    -fx-highlight-text-fill: -fx-text-inner-color;
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
    -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: 0, 1;
    -fx-background-radius: 3, 2;
    -fx-cursor: text;
    -fx-padding: 0.333333em 0.583em 0.333333em 0.583em; /* 4 7 4 7 */
}
.text-input:focused {
    -fx-highlight-fill: -fx-accent;
    -fx-highlight-text-fill: white;
    -fx-background-color: 
        -fx-focus-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: -0.2, 1, -1.4, 3;
    -fx-background-radius: 3, 2, 4, 0;
    -fx-prompt-text-fill: transparent;
}

Although using an external stylesheet is a preferred way to do the styling, you can style inline, using something like below:

textField.setStyle("-fx-text-inner-color: red;");

JavaFX Change textcolor of disabled textfield in CSS

The reason why color turns grey on disabling is because of the opacity change. Just try adding the following css to your textfield.

-fx-opacity: 1.0;

Working example (using setStyle() )

public class KeyStroke extends Application {

    @Override
    public void start(Stage primaryStage) {
        Pane root = new Pane();
        TextField textField = new TextField("Itachi");
        textField.setDisable(true);
        textField.setStyle("-fx-opacity: 1.0;");
        root.getChildren().add(textField);
        Scene scene = new Scene(root, 200, 200);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

JavaFX Text-Area remove borders

As @jewelsea suggested, I think Alert is not the right choice here. Your desired layout can be acheived by using Dialog (as in below code).

Dialog<String> dialog = new Dialog<>();
dialog.setTitle("Lizenz Info");
dialog.getDialogPane().getButtonTypes().addAll(ButtonType.OK);
dialog.getDialogPane().setContent(area);
dialog.setResizable(true);
dialog.showAndWait();

Having said that, you can fix the existing issues as below:

Remove white space around text area: You can remove the white space by setting the padding of TextArea to 0. Include the below code in the css file.

.text-area{
  -fx-padding:0px;
}

Changing the white space background : The .text-area and .content styleclasses are on same node. So instead of declaring with space between them

.text-area .content {
    -fx-background-color: #4c4c4c;
}

you have to declare without the space between the styleclasses (in below code)

.text-area.content {
    -fx-background-color: #4c4c4c;
}

How to change the glow outline color of a focused text field in JavaFX?

Have you tried to reduce the alpha :

.text-field:focused{
    -fx-faint-focus-color: transparent;
    -fx-focus-color:rgba(255,0,0,0.2); /* here rgba (corrected) */
}