javajavafxdatepickerjavafx-css

Removing the blue color effect when DatePicker is clicked

Is there a way to change the default color that makes the DatePicker's textField appear to be highlighted in blue when it's clicked? See image

I have read all related questions that I came accross after hours of searching, and have modified all other elements, but I couldn't find anything on how to style this one. Still nothing after reading the modena stylesheet, and the oracle docs.

Here is the current CSS as seen in the picture:

.date-picker .arrow-button {
    -fx-background-color: black;
    -fx-background-radius: 0;
}
.date-picker .arrow-button:hover {
    -fx-background-color: #585858ff;
}
.date-picker .arrow-button .arrow {
    -fx-background-color: white;
}
.date-picker .arrow-button .arrow:hover {
    -fx-background-color: #585858ff;
}
.date-picker .cell {
    -fx-background-color: white;
}
.date-picker .cell:hover {
    -fx-background-color: #a5a5a5;
}
.date-picker .cell:focused {
    -fx-background-color: #a5a5a5;
}
.date-picker .selected {
    -fx-background-color: #a5a5a5;
    -fx-text-fill: white;
}
.date-picker .selected:focused {
    -fx-background-color: #585858ff;
    -fx-text-fill: white;
}
.date-picker-popup  {
    -fx-border-color: transparent;
}
.date-picker-popup .month-year-pane {
    -fx-background-color: #a5a5a5;
}
.date-picker-popup .month-year-pane .label {
    -fx-text-fill: white;
}
.date-picker-popup .week-number-cell {
    -fx-text-fill: white;
}
.date-picker-popup .spinner .button .left-arrow,
.date-picker-popup .spinner .button .right-arrow {
        -fx-background-color: white;
} 
.date-picker-popup .spinner .button .left-arrow:hover,
.date-picker-popup .spinner .button .right-arrow:hover {
    -fx-background-color: #585858ff;
} 
.date-picker-popup .spinner .button,
.date-picker-popup .spinner .button {
    -fx-background-color: transparent;
}
.date-picker .text-field {
    -fx-control-inner-background: black;
    -fx-text-fill: #a5a5a5;
}

It might just be me overlooking something minor here, but any help would be appreciated regardless.

Solution

  • To remove the blue effect, write this code in your CSS

    .date-picker:focused {
    -fx-faint-focus-color: transparent;
    -fx-focus-color: transparent;
}