here’s the problem
enter image description here

the css FX code is

.custom-combobox .arrow-button {
    -fx-background-color: transparent;
    -fx-background-size: contain;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-image: url('../img/downArrow.png');
}

.custom-combobox .list-cell {
    -fx-pref-height: 70px;
    -fx-pref-width: 150px;
    -fx-background-color: red;
    -fx-background-size: 100% 100%; 
    -fx-background-position: center;
    -fx-alignment: center;
}

.custom-combobox .combo-box {
    -fx-max-height: 70px;
    -fx-max-width: 150px;
    -fx-background-size: 100% 100%; 
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-padding: 0; 
}

.custom-combobox .arrow {
    -fx-background-color: transparent;
    -fx-padding: 0;
    -fx-background-image: url('../img/downArrow.png');
    -fx-background-size: contain;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-shape: null;
}

(custom-combobox is a css class in my fxml)
I can’t get the red behind the arrow

get the red behind the arrow