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

Question

I am trying to change the background color of my TextField "colorBox0" to "value0" but it gets rid of the border.
Here is a simplified version of my code:

   static Paint value0 = Paint.valueOf("FFFFFF");
   TextField colorBox0;
   colorBox0.setBackground(new Background(new BackgroundFill(value0, CornerRadii.EMPTY, Insets.EMPTY)));

Any help is very much appreciated
Thank you

Topo

Wow, this is frustrating... – Woodbridge

Answer 1

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));

Topo

where did you find "-fx-control-inner-background" from? where is the official reference? Thank you – Ascidium

docs.oracle.com/cd/E17802_01/javafx/javafx/1.3/docs/api/… – Gravelblind

Answer 2

Looking at the (shortened) default JavaFX styles for the TextField explains a lot:

.text-input {
  -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;
}

So the background is a layered background including the border. This technique is used a lot throughout JavaFX. But it is very easy to modify just one color.

First we need to assign a new custom style class to our TextField:

TextField textField = new TextField();
textField.getStyleClass().add("custom");

and the CSS file:

.custom {
  -fx-control-inner-background: orange;
}

As you can see, you do not have to override all styles of the textfield, it is sufficient to only override the color variable used for the background.

Wyckoff

Is there a way to set the background color to the value of value0 because I want to be able to change value0 and in turn change the background color – Topo

Programmitically changing this will reset all background colors. But you can change the colors through CSS at runtime, too. For example by changing the style class or a pseudoclass state. – Wyckoff

I used a modified version of your css to fix it – Topo

Answer 3

Try to set the color using CSS:

TextField colorBox0;
colorBox0.setStyle("-fx-background-color: white;");

Onofredo

That is not working. It changes the borders, too. For everyone who will find this answer. – Annabelannabela

As the OP found out, using -fx-control-inner-background instead of -fx-background-color works though. – Bensky

Answer 4

Elegant solution with colour translation:

static Paint black = Paint.valueOf(Integer.toHexString(Color.BLACK.hashCode()));
TextField textfield;
textField.setStyle(
"-fx-control-inner-background: #"+black.toString().substring(2));

Sandpiper