There seems to be an issue with the CSS properties of a ComboBox-Popup. A small white line can be seen between the rounded border and the list cell element in the image. It is suspected that this line may be due to a background color or border set in another CSS property. Any suggestions on which CSS property needs to be modified?
The image on the right side highlights the problem with the white line, while the left side displays a menu bar without any such line.
https://i.sstatic.net/kPySW.jpg
In the screenshot where all combobox CSS properties have been removed, a gap can be observed between the border and the selected cell.
https://i.sstatic.net/T7TAh.jpg
Here are the CSS combobox properties defined in my stylesheet:
-fx-base and fx-color = dark grey background color
-fx-accent = green hover and highlight color.
.combo-box-popup .list-view {
-fx-color: -fx-base;
-fx-background-color:
derive(-fx-color,-40%),
derive(-fx-color,100%),
linear-gradient(to bottom, derive(-fx-color, 15%) 0%, derive(-fx-color, 40%) 15%, derive(-fx-color,55%) 75%, derive(-fx-color,15%) 100%);
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
-fx-padding: 0.333333em 0.333333em 0.666667em 0.083333em;
}.combo-box-popup .list-view .list-cell:filled {
-fx-background-color: transparent;
-fx-text-fill: white;
}
.combo-box-popup .list-view .list-cell:filled:hover {
-fx-background-color: -fx-accent;
}
.combo-box-popup .list-view .list-cell:filled:selected {
-fx-background-color: -fx-accent;
}