JavaFX: DatePicker Custom CSS

Before and after applying this CSS

* {
	-fx-primary-color: #007acc;
	-fx-secondary-color: #4B6EAF;
	-fx-light-grey-color: #d1d1d1;
    
	-fx-focus-color: -fx-secondary-color;
}

.date-picker .arrow-button {
	-fx-background-color: -fx-primary-color;
	-fx-background-radius: 0;
}
.date-picker .arrow-button:hover {
	-fx-background-color: -fx-secondary-color;
}
.date-picker .arrow-button .arrow {
	-fx-background-color: white;
}
.date-picker .cell {
	-fx-background-color: white;
}
.date-picker .cell:hover {
	-fx-background-color: -fx-light-grey-color;
}
.date-picker .cell:focused {
	-fx-background-color: -fx-light-grey-color;
}
.date-picker .selected {
	-fx-background-color: -fx-primary-color;
	-fx-text-fill: white;
}
.date-picker .selected:focused {
	-fx-background-color: -fx-primary-color;
	-fx-text-fill: white;
}
.date-picker-popup  {
	-fx-border-color: transparent;
}
.date-picker-popup .month-year-pane {
	-fx-background-color: -fx-primary-color;
}
.date-picker-popup .month-year-pane .label {
	-fx-text-fill: white;
}
.date-picker-popup .week-number-cell {
	-fx-text-fill: -fx-secondary-color;
}
.date-picker-popup .spinner .button .left-arrow,
.date-picker-popup .spinner .button .right-arrow {
	-fx-background-color: white;
}

Leave a Reply

Your email address will not be published. Required fields are marked *