Why does disabled JavaFX TextArea has a different color than TextField

Question

I am restyling a JavaFX application, but I have a problem with the :disabled styles. When I try to change the -fx-text-fill and -fx-opacity settings, textareas still get a slightly lighter text color than textfields. This is the style I got right now:

/*** Text Fields and Areas ***/
.text-field,
.text-area {
    -fx-text-fill: #000;
    -fx-opacity: 1.0;
}

.text-field:disabled,
.text-area:disabled {
    -fx-text-fill: #000;
    -fx-opacity: 0.5;
}

This is how the disabled components look in the program: Screenshot from the JavaFX application

As you can see, the text color of the TextField is #7a7a7a which is 50% of #000. The TextArea however appear to have the color #c7c7c7 which is 25% of #000.

Does anyone know how I can get the same disabled color for textareas as for textfields?

Answer 1

What's going on

IMO the current behaviour is a bug and should be filed at http://bugreport.java.com (I have done this, unfortunately the Java bug reporting system does not provide any way to track this bug report unless it is accepted by the JavaFX team).

The issue is that the opacity modifier for the text in the text area is applied twice. The default TextArea skin is implemented as a TextArea control node, with an internal ScrollPane in it and, when the TextArea is disabled, the opacity of both is set to 0.4, so the text (and scroll bars in the scroll pane) have the disability opacity fading effect applied twice (which is wrong). You can see this by inspecting a disabled TextArea control in ScenicView.

Workaround

Explicitly set the disabled scroll-pane's opacity to 1 when it is contained within a text-input control.

.text-input > .scroll-pane:disabled {
    -fx-opacity: 1;
}

Sample app:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import org.scenicview.ScenicView;

public class DisabilityAssistance extends Application {

    @Override
    public void start(Stage stage) throws Exception{
        TextArea area = new TextArea("Text Area");
        area.setDisable(true);
        TextField field = new TextField("Text Field");
        field.setDisable(true);

        Scene scene = new Scene(new VBox(10, area, field));
        stage.setScene(scene);
        stage.show();

        scene.getStylesheets().add(getClass().getResource(
                "disability.css"
        ).toURI().toURL().toExternalForm());

        ScenicView.show(stage.getScene());
    }

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

Output (without CSS work-around applied):

Output (with CSS work-around applied):