Search code examples
javacssjavafxjavafx-8fxml

JavaFX TextField CSS


How to create JavaFX TextField look like Android TextField using JavaFX CSS ?

For example : Android TextField

I have tried lots of FX css but not achieved look like that . Here http://jsfiddle.net/QKm37/ CSS exist for HTML input type but it is not applicable in JavaFX SceneBuilder .

For example : /** Not Exist in JavaFX **/

-fx-border: none;

-fx-background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;


Solution

  • Try this in your CSS file:

    .text-field {
        -fx-background-color: #a9a9a9 , white , white;
        -fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
    }
    
    .text-field:focused {
        -fx-background-color: #a9a9a9 , white , white;
        -fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
    }