javafx - no border on focused button -
hey i'm starting out javafx. found custom buttons css code on net lost borders of buttons when clicked (the vanilla blue border). have back.
.root{ -fx-background:#222222; } .glass-grey { -fx-background-color: #c3c4c4, linear-gradient(#d6d6d6 50%, white 100%), radial-gradient(center 50% -40%, radius 200%, #e6e6e6 45%, rgba(230,230,230,0) 50%); -fx-background-radius: 30; -fx-background-insets: 0,1,1; -fx-text-fill: black; -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1 ); } .menu-btn{ -fx-background-color: linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%), linear-gradient(#020b02, #3a3a3a), linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%), linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%), linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%); -fx-background-insets: 0,1,4,5,6; -fx-padding: 10; -fx-font-size: 14px; -fx-text-fill: white; -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1); -fx-vgap: 10; }
this not work:
.menu-btn:focused{ -fx-focus-color: orange; }
you can play -fx-background-color
, -fx-background-insets
.menu-btn{ -fx-background-color:transparent,/* here have transparent focus */ linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%), linear-gradient(#020b02, #3a3a3a), linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%), linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%), linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%); /*focus line size 2 pixel. see -fx-background-insets: -2*/ -fx-background-insets: -2, 0, 1, 4,5,6; -fx-padding: 10; -fx-font-size: 14px; -fx-text-fill: white; -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1); -fx-vgap: 10; } .menu-btn:focused{ -fx-background-color: -fx-focus-color, /* here have focus color*/ /* can color or gradient */ linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%), linear-gradient(#020b02, #3a3a3a), linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%), linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%), linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%); }
tip: can @ fxrt.jar!/com/sun/javafx/scene/control/skin/caspian/caspian.css
, see how default buttons styled
Comments
Post a Comment