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.

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

• Tweet
• Share
• Share
• Share
• Share