javafx - Why -fx-border-color reset border radius of TextField? -
i want change background , border color of textfield use javafx css. don't understand why -fx-border-color reset border radius of textfield?

as can see second textfield doesn't have border radius.
sample/style.css:
.validation-error {     -fx-background-color: #fff0f0;     -fx-border-color: #dbb1b1; }   sample/main.java
package sample;  import javafx.application.application; import javafx.geometry.insets; import javafx.scene.scene; import javafx.scene.control.textfield; import javafx.scene.layout.vbox; import javafx.stage.stage;  public class main extends application {      @override     public void start(stage primarystage) throws exception{         textfield txtwithoutstyle = new textfield();         txtwithoutstyle.settext("without style");          textfield txtwithstyle = new textfield();         txtwithstyle.settext("with style");         txtwithstyle.getstyleclass().add("validation-error");          vbox root = new vbox();         root.setpadding(new insets(14));         root.setspacing(14);         root.getchildren().addall(txtwithoutstyle, txtwithstyle);         root.getstylesheets().add("/sample/style.css");          scene scene = new scene(root, 300, 275);          primarystage.settitle("hello world");         primarystage.setscene(scene);         primarystage.show();     }       public static void main(string[] args) {         launch(args);     } }   update 1
additional question: why -fx-background-color remove textfield border (just remove -fx-border-color style.css reproduce it)?
the default stylesheet applies borders text fields (and other controls) using "nested backgrounds" instead of borders.
some of settings textinputcontrol default stylesheet are:
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),     linear-gradient(from 0px 0px 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background); -fx-background-insets: 0, 1; -fx-background-radius: 3, 2;   this sets 2 background colors (both defined linear gradient), 1 (the "outer" one) color based on -fx-text-box-border, , other color based on -fx-control-inner-background. "outer" background outside "inner" background because have insets of 0 , 1, respectively; curved edge resulting apparent border created having radii of 3 , 2 each background, respectively.
this is, anecdotally @ least, far more efficient using actual borders in css, choice of technique performance reasons.
so preserve radius border, can use same technique, , override 2 background colors:
.validation-error {     -fx-background-color: #dbb1b1, #fff0f0 ;  }   note can replace "looked-up-colors", preserve subtle linear gradients being used:
.validation-error {     -fx-text-box-border: #dbb1b1 ;     -fx-control-inner-background: #fff0f0 ;   }   for highlighting when focused, default uses colors named -fx-focus-color , -fx-faint-focus-color: in latter version want redefine too:
.validation-error {     -fx-text-box-border: #dbb1b1 ;     -fx-control-inner-background: #fff0f0 ;     -fx-focus-color: #ff2020 ;     -fx-faint-focus-color: #ff202020 ;   }      
Comments
Post a Comment