Textfield CSS樣式使用JavaFx

我試圖使用JavaFX樣式一些文本字段，但我沒有得到想要的結果。我的目標是讓文本字段以單數下劃線表示。這裏是我的CSS：Textfield CSS樣式使用JavaFx

.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; 
}

我已經研究了這個問題，但我發現類似的那些問題的答案真的不包含足夠的信息來再現和正確適用於我的計劃。這對我並不是很瞭解CSS樣式很有幫助。我試圖用最小的結果使用插入。感謝您提供的任何答案！

來源

2017-10-18 Howard Pearce

你爲什麼不創建一個最小的可運行的例子，把它添加到你的問題？ – reporter

對我來說，以下工作：

/* 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 ; 
}

下面的測試工具爲這個

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

產生

來源

2017-10-18 14:49:31

謝謝，還不夠高代表積極發表你的帖子呢。抱歉! –

因爲你只需要一個下劃線，你需要的最低東西

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

這將改變背景顏色爲灰色，邊框寬度設置爲0的一切，但下邊框和背textfield的背景是透明的，所以它不是白色的。

來源

2017-10-18 14:48:49

Textfield CSS樣式使用JavaFx

回答

相關問題