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

回答

相关问题