I want to have a textfield with three different borders for three cases:
a white border when not hovered or focused
a grey border when hovering
a blue border when focused and typing
I started like this:
#custom-text-field {
-fx-border-width: 2;
-fx-border-color: white;
}
#custom-text-field:hover{
-fx-border-width: 2;
-fx-border-color: #909090;
}
#custom-text-field:focused{
-fx-border-width: 2;
-fx-border-color: #0093EF;
}
The problem is that the border for focusing never shows up. How do it set it correctly?
I use it like this
.custom-text-field {
-fx-background-color:
#FFFFFF,
#FFFFFF;
-fx-background-insets: 0, 2;
-fx-background-radius: 0, 0;
}
.custom-text-field:focused {
-fx-background-color:
#0093EF,
#FFFFFF;
}
.custom-text-field:hover {
-fx-background-color:
#909090,
#FFFFFF;
}
.custom-text-field:focused:hover {
-fx-background-color:
#0093EF,
#FFFFFF;
}
Related
how do I change the CSS of month label and year label? they are grayish and I want to change to white. I cant find the CSS for these two items.
Current CSS code of this datepicker:
/**
* https://gist.github.com/maxd/63691840fc372f22f470
*/
.calendar-grid {
-fx-background-color: rgb(20, 156, 255);
}
.combo-box-popup > .list-view > .placeholder > .label {
-fx-text-fill: white;
}
.calendar-header {
-fx-background-color: #1d1d1d;
-fx-base: #1d1d1d;
-fx-text-fill: white;
}
.date-picker-popup {
-fx-text-fill: white;
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-17%),
derive(-fx-color,-30%)
),
-fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-background-radius: 0;
-fx-alignment: CENTER; /* VBox */
-fx-spacing: 0; /* VBox */
-fx-padding: 0.083333em; /* 1 1 1 1 */
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.date-picker > .text-field {
-fx-text-fill: white;
}
.date-picker-popup > .month-year-pane {
-fx-background-color: #1d1d1d;
-fx-text-fill: white;
}
Change the style for the .month-year-pane to
.date-picker-popup > .month-year-pane {
-fx-base: #1d1d1d ;
-fx-mark-highlight-color: -fx-light-text-color ;
}
By default, -fx-background-color is set to fx-background, which in turn depends on -fx-base. The default text fill for controls whose text is rendered over a background of -fx-background is automatically chosen depending on the intensity of the background; in this case it will be set to -fx-light-text-color (which defaults to white).
The arrows are rendered in -fx-mark-highlight-color, so setting this to -fx-light-text-color ensures the arrows are the same color as the text. (Probably better is to mimic the ladder for -fx-text-fill.)
A lot of your CSS seems to have no effect. With the changes above, this seems equivalent:
.calendar-grid {
-fx-background-color: rgb(20, 156, 255);
}
.date-picker > .text-field {
-fx-text-fill: white;
}
.date-picker-popup > .month-year-pane {
-fx-base: #1d1d1d ;
-fx-mark-highlight-color: -fx-light-text-color ;
}
Note that the rule
.date-picker > .text-field {
-fx-text-fill: white;
}
makes the text in the text field (i.e. the selected date) invisible; I don't know if this is the desired effect.
Looking through the source code I found the labels use the spinner-label style class so I think you can just do:
.date-picker .spinner-label {
-fx-text-fill: white;
}
Is it possible to add space between the button and its border? I want the black color to fill the button but not completely it should leave out a little spacing between the border.
The button layout is width:200, height:40
The CSS used:
.button:focused, .button:hover{
-fx-text-fill: aquamarine;
-fx-border-color: -fx-text-fill;
-fx-border-radius: 50px;
-fx-background-radius: 50px;
-fx-scale-x: 1.1;
-fx-scale-y: 1.1;
-fx-background-color: #34495E;
}
.button:hover{
-fx-cursor: hand;
-fx-background-color: black;
}
.button{
-fx-font-size: 20px;
-fx-background-radius: 5 5 5 5;
-fx-text-fill: #f0f0f0;
-fx-border-color: -fx-text-fill;
-fx-border-radius: 5 5 5 5;
-fx-border-width: 2px;
-fx-background-color: #34495e;
}
You can specify multiple backgrounds in JavaFX CSS, which are rendered one on top of the other in the order they are specified. Each background can have a corresponding insets, enabling you to see a portion of the backgrounds which come before it.
So, to leave a gap between the border and the background, you can specify a transparent background before the "main" background, with a positive insets for the latter:
.button {
-fx-background-color: transparent, black ;
-fx-background-insets: 0, 5 ;
}
I want to style my context menu but I can't get rid off white area between menu-item and context-menu border, see example.
rendered context menu with css styles
I want that color fils whole area up to context menu border like this
ecpected styling
My css styles
.context-menu {
-fx-background-color: #FFFFFF;
-fx-effect: null;
-fx-border-color: #D6D9DF;
-fx-border-width: 0.5;
-fx-border-radius: 4;
-fx-background-radius: 4;
-fx-background-insets: 0, 1;
}
.menu-item {
-fx-padding: 0;
-fx-pref-height: 28px;
}
.context-menu .separator {
-fx-padding: 0;
}
.menu-item .label {
-fx-font-size: 12px;
-fx-padding: 6 16 8 12;
-fx-text-fill: #2D3845;
}
.menu-item:focused {
-fx-background-color: transparent;
}
.menu-item:hover {
-fx-background-color: #EAECEF;
}
.menu-item:pressed {
-fx-background-color: #D6D9DF;
}
have you tried adding
yourcontextmenuname.getStyleClass().remove("context-menu");
and then change your CSS to refer yourcontextmenuname by ID. If that does not work do the same with menu-item.
.popup-view {
-fx-background-color: red; // nothing happens here
}
.popup-view .scroll-pane {
-fx-background-color: green; // nothing happens here
}
.popup-view .viewport {
-fx-background-color: violet; // color is shown
-fx-border-color: violet;
-fx-background-radius: 7; // no affect
-fx-border-radius: 7;
}
if i remove .viewport it just shows a white background without radius.
i want a popup-view with a certain color and radius for
that background - as violet for example. thanks for any help!
If you check your PopupView control with ScenicView, you'll see that its ScrollPane has as style class root-node.
So your css should be something like this:
.popup-view > .root-node {
-fx-background-color: green;
}
.popup-view > .root-node > .viewport {
-fx-background-color: violet;
-fx-border-color: violet;
-fx-background-radius: 7;
-fx-border-radius: 7;
}
i'd like to customize the appearance of a Menu in my JavaFX8 application. How can i get rid or style the color of the 'white outline' shown in the following screenshot?
i tryed:
#MainMenuBar
{
-fx-text-fill: #bbbbbb;
-fx-background-color: #3c3f41;
-fx-border-color: #555555;
-fx-border-style: solid;
-fx-border-width: 0 0 1px 0;
}
.menu-item
{
-fx-background-color: #3c3f41;
-fx-text-fill: #bbbbbb;
-fx-border-color: transparent;
}
but it still there is this white otuline.
Thx,
seems you have to also style the 'context-menu'.
it worked by adding:
.context-menu
{
-fx-background-color: #3c3f41;
-fx-border-color: #555555;
-fx-border-style: solid;
-fx-border-width: 1px;
}
This and this answers on SO helped me to figure it out, thanks all.