How To Change The Color Of TextField in JavaFX?

Overview

In this tutorial, we show you how to change the color of TextField in JavaFX.
Change The Color Of TextField in JavaFX


Way 1 - Using the CSS styles for TextField "-fx-text-fill: #color"

Edit Example.fxml file. Add style="-fx-text-fill: #BA55D3;" to TextField.
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" fx:id="main" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.jackrutorial.ExampleController">
   <children>
      <TextField fx:id="txtSearch" layoutX="149.0" layoutY="162.0" prefHeight="50.0" prefWidth="300.0" style="-fx-text-fill: #BA55D3;" />
   </children>
</AnchorPane>

Way 2 - Using the CSS styles for TextField "-fx-text-inner-color: #color"

Edit Example.fxml file. Add style="-fx-text-inner-color: #BA55D3;" to TextField.
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" fx:id="main" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.jackrutorial.ExampleController">
   <children>
      <TextField fx:id="txtSearch" layoutX="149.0" layoutY="162.0" prefHeight="50.0" prefWidth="300.0" style="-fx-text-inner-color: #BA55D3;" />
   </children>
</AnchorPane>

Way 3 - Using souce code set style for TextField

Using javafx.scene.control.TextField.setStyle
package com.jackrutorial;


import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextField;

public class ExampleController implements Initializable {
    
    @FXML
    private TextField txtSearch;

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        txtSearch.setStyle("-fx-text-inner-color: #BA55D3;");
    }
}

Full Source code

Example.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" fx:id="main" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.jackrutorial.ExampleController">
   <children>
      <TextField fx:id="txtSearch" layoutX="149.0" layoutY="162.0" prefHeight="50.0" prefWidth="300.0" />
   </children>
</AnchorPane>
ExampleController.java
package com.jackrutorial;


import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextField;

public class ExampleController implements Initializable {
    
    @FXML
    private TextField txtSearch;

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        
        txtSearch.setStyle("-fx-text-inner-color: #BA55D3;");
        //or txtSearch.setStyle("-fx-text-fill: #BA55D3;");
    }
}
Previous Post
Next Post

post written by: