Textarea javaFx Color

Question

I'm trying to develop an app that looks like a terminal console, am using a TextArea for that and my wish is to habe a black background and green text,

The point I want to do this without using any ccs template

I know that my question can look like a duplicated in here:

javafx textarea background color not css

or

JavaFX CSS styling of TextArea does not work

but after reading those and trying what they suggested I found no luck to solve my issue

What I tried so far (Unsuccessfully):

in the FXML:

<TextArea 
    fx:id="terminalTextArea"
    layoutX="14.0"
    layoutY="85.0"
    prefHeight="64.0"
    prefWidth="402.0"
    style="-fx-font-family: Consolas; -fx-highlight-fill: #00ff00; -fx-highlight-text-fill: #000000; -fx-text-fill: #00ff00; -fx-background-color:#000000;"
    text="Terminal"
    AnchorPane.leftAnchor="10.0"
    AnchorPane.rightAnchor="10.0">
    <font>
        <Font name="System Bold" size="14.0" />
    </font>
</TextArea>

and in the source-code:

@Override
public void initialize(URL url, ResourceBundle rb) {
    System.out.println("init here");
    terminalTextArea.setStyle("-fx-text-fill: black;");
}

The only thing that I get is a bordered color like in the image below:

Machine

Why do you want to do this without CSS? That is the supported mechanism for changing the style of a control. – Caracas

Answer 1

The recommended way is to use an external CSS file, as in the examples you linked.

If for some reason you don't want to do that, try

style="-fx-control-inner-background:#000000; -fx-font-family: Consolas; -fx-highlight-fill: #00ff00; -fx-highlight-text-fill: #000000; -fx-text-fill: #00ff00; "

in your FXML file, or equivalently

terminalTextArea.setStyle("-fx-control-inner-background:#000000; -fx-font-family: Consolas; -fx-highlight-fill: #00ff00; -fx-highlight-text-fill: #000000; -fx-text-fill: #00ff00; ");

in your controller's initialize() method.

SSCCE:

StyledTextArea.fxml:

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

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.text.Font?>

<HBox xmlns:fx="http://javafx.com/fxml/1" >
    <padding>
        <Insets top="12" left="12" right="12" bottom="12"/>
    </padding>
    <TextArea 
        prefHeight="64.0"
        prefWidth="402.0"
        style="-fx-control-inner-background:#000000; -fx-font-family: Consolas; -fx-highlight-fill: #00ff00; -fx-highlight-text-fill: #000000; -fx-text-fill: #00ff00; "
        text="Terminal">

        <font>
            <Font name="System Bold" size="14.0" />
        </font>
    </TextArea>
</HBox>

and a test class:

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class StyledTextArea extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        primaryStage.setScene(new Scene(
            FXMLLoader.load(getClass().getResource("StyledTextArea.fxml"))
        ));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Caracas

-fx-control-inner-background: #000000 sets the background color of the text area, just FYI for other people that may have tried -fx-background-color – Nunnery

Answer 2

It's simple, just put an id name inside the elment you want like:

AnchorPane id="AnchorPane" prefHeight="180.0" prefWidth="430.0"

or in Scene Builder in properties just down below the title JavaFX CSS write the name and style this element in your CSS file.

Sharpset

Answer 3

if you are trying to set the background of textArea using CSS, you should have this attributes of CSS .content . viewport //additional .scroll-pane

Codes:

#tContent{
    -fx-pref-width: 180;
    -fx-pref-height: 110;

}
.content {
    -fx-background-color: transparent;
}
.viewport{
    -fx-background-color: transparent; 
}

Babushka