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?

enter image description here

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

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -