JavaFX setStyle mit -fx-background-color malt nur die Kanten einer TextArea

Question

Also ich habe eine dynamisch erstellte Liste von TextArea's und ich möchte sie malen je nachdem, welche CheckBox ich auswähle. Derzeit färbt es nur die Grenzen, aber nicht das Innere der TextArea.

Hier ist mein Code:

if (cb.isSelected()) { 
    ta.setStyle("-fx-background-color:#38ee00;"); 
} 
if (cb2.isSelected()) { 
    ta.setStyle("-fx-background-color:orangered;"); 
} 
if (!cb2.isSelected() && !cb.isSelected()) { 
    ta.setStyle("-fx-background-color:white;"); 
} 

Und hier ist das Ergebnis, dass es bringt:

Wenn Sie weitere Informationen benötigen, wenden Sie sich bitte, mich zu informieren.

Answer 1

Sie müssen eigentlich die .content Region, die ein Kind der TextArea (see CSS Reference: TextArea - Substructure) ist, stylen.

Sie können diesen Knoten mit lookup erhalten, aber nur nachdem die Skin angewendet wurde, was nicht vor dem Layout geschieht. Dann aber können Sie etwas tun:

Region content = (Region) ta.lookup(".content"); 
content.setStyle("-fx-background-color:orangered;"); 

Eine Alternative wäre ein CSS-Stylesheet verwenden und das Ändern der Klasse der TextArea (sofern nur eine begrenzte Anzahl von Farben verwendet wird):

.text-area.color-orangered .content { 
    -fx-background-color: orangered; 
} 

.text-area.color-white .content { 
    -fx-background-color: white; 
} 

.text-area.color-green .content { 
    ... 

// remove old class for coloring 
ta.getStyleClass().removeIf(s -> s.startsWith("color-")); 

// add new class 
ta.getStyleClass().add("color-orangered"); 

Answer 2

Die CSS-Stilklasse, die Sie suchen, ist .text-area .content. Sie haben mehrere Möglichkeiten, diese Stilklasse zu beeinflussen. Eine Möglichkeit besteht darin, PseudoClass zu verwenden, wodurch Sie CSS-Selektoren verwenden können.

Main.java

public class Main extends Application { 


    @Override 
    public void start(Stage primaryStage) { 
     try { 
      BorderPane root = new BorderPane(); 
      root.getStylesheets().add(getClass().getResource("application.css").toExternalForm()); 
      // Add the CSS style class 
      TextArea ta = new TextArea(); 
      ta.getStyleClass().add("my-text-area"); 


      ChoiceBox<String> cb = new ChoiceBox<String>(FXCollections.observableArrayList("green", "orangered")); 
      cb.valueProperty().addListener(new ChangeListener<String>() { 

       @Override 
       public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) { 
       // On selection, change the pseudo class of the TextArea 
       ta.pseudoClassStateChanged(PseudoClass.getPseudoClass(newValue), true); 
       } 
      }); 

      root.setCenter(ta); 
      root.setBottom(cb); 

      Scene scene = new Scene(root,400,400); 

      primaryStage.setScene(scene); 
      primaryStage.show(); 
     } catch(Exception e) { 
      e.printStackTrace(); 
     } 
    } 

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

application.css

.my-text-area:orangered .content { 
    -fx-background-color: orangered ; 
} 

.my-text-area:green .content { 
    -fx-background-color: green ; 
}