Создать форму для TextField в JavaFX С Css

Question

Мне нужно создать эту форму для TextField с помощью CSS

Но мне удалось создать следующий интерфейс:

Как Могу ли я создать текстовое поле, например Sample Pic?

Answer 1

Используйте -fx-shape property of Region, чтобы указать SVG path.

.login-box { 
    -fx-spacing: -15; 
    -fx-fill-height: false; 
} 

.login-box > .button { 
    -fx-shape: "M0,1 L1,0 L2,1 L1,2 Z"; 
    -fx-min-width: 60; 
    -fx-max-width: 60; 
    -fx-min-height: 60; 
    -fx-max-height: 60; 
} 

.login-box > .textfield-container { 
    -fx-spacing: 8; 
} 

.login-box > .textfield-container > .text-field { 
    -fx-shape: "M200,0 H0 V30 H170 Z"; 
} 

.login-box > .textfield-container > .password-field { 
    -fx-shape: "M170,0 H0 V30 H200 Z"; 
} 

.login-box > .textfield-container > .text-field, .login-box > .textfield-container > .password-field { 
    -fx-min-width: 200; 
    -fx-max-width: 200; 
    -fx-min-height: 30; 
    -fx-max-height: 30; 
    -fx-padding: 4 30 4 8; 
} 

Оба SVG-Дорожки начинаются в верхнем правом углу (M200,0/M170,0), а затем рисунок в верхнем левом углу (H0), продолжить рисование вниз к нижнему левому углу (V30), то рисунок в нижний правый угол (V170/V200) и, наконец, закрытие пути (Z).

Просмотр структуры:

login-box        (HBox) 
    |---- textfield-container   (VBox) 
    |   |--- text-field   (TextField) 
    |   |--- password-field  (PasswordField) 
    | 
    |---- button       (Button)