Style CSS Textfield utilisant JavaFx

Question

J'essaye de styler certains champs de texte en utilisant JavaFX, mais je n'obtiens pas les résultats souhaités. Mon but est d'avoir le champ de texte représenté par un soulignement singulier. Voici mon CSS:

.text-field{ 
    -fx-font-family: "Quicksand"; 
    -fx-font-size: 18; 
    -fx-padding: 1,1,1,1; 
    -fx-border-color: grey; 
    -fx-border-width: 2; 
    -fx-border-radius: 1; 
    -fx-border: gone; 
    -fx-background-color: transparent; 
    -fx-text-fill: grey; 
} 

J'ai fait des recherches à cette question, mais les réponses que je trouve d'autres semblables ne contiennent pas vraiment suffisamment d'informations pour se reproduire et appliquer correctement à mon programme. Cela ne m'aide pas que je ne connais pas très bien le style CSS. J'ai essayé d'utiliser des encarts avec des résultats minimes. Merci pour toutes les réponses fournies!

Answer 1

Les œuvres suivantes pour moi:

/* File style.css */ 

.text-field { 
    -fx-background-color: -fx-text-box-border, -fx-background ; 
    -fx-background-insets: 0, 0 0 1 0 ; 
    -fx-background-radius: 0 ; 
} 
.text-field:focused { 
    -fx-background-color: -fx-focus-color, -fx-background ; 
} 

Le harnais de test suivant pour cette

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene; 
import javafx.scene.control.TextField; 
import javafx.scene.layout.GridPane; 
import javafx.stage.Stage; 

public class TextFieldStyleTest extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     GridPane root = new GridPane(); 
     root.setHgap(10); 
     root.setVgap(5); 
     for (int row = 0 ; row < 4; row++) { 
      for (int col = 0 ; col < 2; col++) { 
       root.add(new TextField(), col, row); 
      } 
     } 
     root.setPadding(new Insets(5)); 
     Scene scene = new Scene(root); 
     scene.getStylesheets().add("style.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

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

produit

Answer 2

Puisque vous ne souhaitez que soulignement, les choses minimales dont vous aurez besoin sont

.text-field { 
    -fx-border-color: grey; 
    -fx-border width: 0 0 1 0; // top, right, bottom, left 
    -fx-background-color: transparent; 
} 

Cela va changer la couleur de fond gris, définir la largeur de la bordure à 0 pour tout sauf la bordure inférieure, et soutenir la L'arrière-plan de textfield est transparent donc il n'est pas blanc.