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