ComboBox styling

[masc-it]

Hi,
I am trying to change ComboBox style, in particular I'd like to replace the purple with something else, but the below css (I have replaced the purple occurrences with black) just does not work. Any ideas?

CSS (combostyle.css in my resources folder)

@import "Fonts.css";
.mfx-combo-box {
    -mfx-line-color: black;
    -mfx-unfocused-line-color: black;
    -mfx-line-stroke-width: 2px;
    -fx-background-color: transparent;
    -fx-background-radius: 3 3 0 0;
    -fx-border-width: 1.5;
}

.mfx-combo-box .mfx-icon-wrapper .mfx-ripple-generator {
    -mfx-ripple-color: black;
}

.mfx-combo-box .mfx-icon-wrapper .mfx-font-icon {
    -mfx-color: black;
}

.mfx-combo-box:focused .mfx-icon-wrapper .mfx-font-icon {
    -mfx-color: black;
}

.mfx-combo-box:editor .mfx-icon-wrapper .mfx-font-icon {
    -mfx-color: black;
}

.mfx-list-view {
    -fx-background-color: white;
    -fx-border-color: #A4B1B6;
    -fx-background-insets: 0 -1 0 -1;
    -fx-border-insets: 0 -1 0 -1;

    -mfx-track-color: transparent;
    -mfx-thumb-color: black;
    -mfx-thumb-hover-color: black;
}

.mfx-list-view .mfx-list-cell:hover {
    -fx-background-color: black;
    -fx-border-color: black;
}

.mfx-list-view .mfx-list-cell:selected {
    -fx-background-color: black;
    -fx-border-color: black;
}

.mfx-combo-box:invalid {
    -mfx-line-color: #EF6E6B;
    -mfx-unfocused-line-color: #EF6E6B;
}

.mfx-combo-box:invalid .mfx-icon-wrapper .mfx-font-icon{
    -mfx-color: #EF6E6B;
}

.mfx-combo-box:focused:invalid .mfx-icon-wrapper .mfx-font-icon{
    -mfx-color: #EF6E6B;
}

.mfx-combo-box:focused:editor:invalid .mfx-icon-wrapper .mfx-font-icon{
    -mfx-color: #EF6E6B;
}

.mfx-combo-box:invalid .mfx-label {
    -mfx-text-fill: #EF6E6B;
}

.mfx-combo-box:invalid .mfx-label:prompt {
    -mfx-text-fill: #EF6E6B;
}

.mfx-combo-box .validate-label {
    -fx-background-color: transparent;
    -fx-font-family: "Open Sans SemiBold";
    -fx-font-size: 11;
    -fx-text-fill: #EF6E6B;
}

.mfx-combo-box .unfocused-line {
    -fx-stroke: -mfx-unfocused-line-color;
}

.mfx-combo-box .focused-line {
    -fx-stroke: -mfx-line-color;
}

.mfx-combo-box:invalid .unfocused-line {
    -fx-stroke: #EF6E6B;
}

.mfx-combo-box:invalid .focused-line {
    -fx-stroke: #EF6E6B;
}

.mfx-combo-box .unfocused-line {
    -fx-stroke: -mfx-unfocused-line-color;
}

.mfx-combo-box .focused-line {
    -fx-stroke: -mfx-line-color;
}

.mfx-combo-box:invalid .unfocused-line {
    -fx-stroke: #EF6E6B;
}

.mfx-combo-box:invalid .focused-line {
    -fx-stroke: #EF6E6B;
}

.mfx-combo-box .unfocused-line {
    -fx-stroke: -mfx-unfocused-line-color;
}

.mfx-combo-box .focused-line {
    -fx-stroke: -mfx-line-color;
}

.mfx-combo-box:invalid .unfocused-line {
    -fx-stroke: #EF6E6B;
}

.mfx-combo-box:invalid .focused-line {
    -fx-stroke: #EF6E6B;
}

CODE

var modeBox = new MFXComboBox<String>();
modeBox.setLineColor(Paint.valueOf("#00000000"));

modeBox.getStyleClass().add("combostyle.css");
modeBox.setItems(FXCollections.observableArrayList(modes));
modeBox.setId("targetMode");

modeBox.selectedValueProperty().bindBidirectional(target.mode);
modeBox.getSelectionModel().selectFirst();
...

Any help or suggestion is appreciated :)

@palexdev great job btw!

[palexdev]

This line of code is wrong:
modeBox.getStyleClass().add("combostyle.css");

The styleclass is the CSS selector, to add the stylesheet to the control you must use:
modeBox.getStylesheets().add(cssfile.css)
Note that "cssfile.css" should be the URL to the file, not just the name

If by correcting this the control still doesn't change style then let me know

[masc-it]

Thanks, I have tried with the new code below but no luck, purple color still there.

modeBox.getStylesheets().add(getClass().getClassLoader().getResource("combostyle.css").toString());

[palexdev]

Thanks, I have tried with the new code below but no luck, purple color still there.

modeBox.getStylesheets().add(getClass().getClassLoader().getResource("combostyle.css").toString());

Can you send me a reproducible example so I can investigate the issue further?

[masc-it]

Sure, here it is.

CODE

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        var vbox = new VBox();
         
        var modes = new String[] {"EL_1", "EL_2"};
        var modeBox = new MFXComboBox<String>();
        modeBox.setItems(FXCollections.observableArrayList(modes));
        modeBox.setComboStyle(Styles.ComboBoxStyles.STYLE1);
        modeBox.getStylesheets().add(getClass().getClassLoader().getResource("combostyle.css").toString());
        vbox.getChildren().add(modeBox);
        Parent root = vbox;
        var scene = new Scene(root, 800, 800);
        primaryStage.setScene(scene);
        primaryStage.show();
   }

}

CSS

.mfx-combo-box {
    -mfx-line-color: black;
    -mfx-unfocused-line-color: grey;
    -mfx-line-stroke-width: 2px;
    -fx-background-color: transparent;
    -fx-background-radius: 3 3 0 0;
    -fx-border-width: 1.5;
}

.mfx-combo-box .mfx-icon-wrapper .mfx-ripple-generator {
    -mfx-ripple-color: black;
}

.mfx-combo-box .mfx-icon-wrapper .mfx-font-icon {
    -mfx-color: black;
}

.mfx-combo-box:focused .mfx-icon-wrapper .mfx-font-icon {
    -mfx-color: black;
}


.mfx-list-view {
    -fx-background-color: black;
    -fx-border-color: #A4B1B6;
    -fx-background-insets: 0 -1 0 -1;
    -fx-border-insets: 0 -1 0 -1;

    -mfx-track-color: transparent;
    -mfx-thumb-color: black;
    -mfx-thumb-hover-color: black;
}


.mfx-list-view .mfx-list-cell:hover {
    -fx-background-color: black;
    -fx-border-color: black;
}

.mfx-list-view .mfx-list-cell:selected {
    -fx-background-color: black;
    -fx-border-color: black;

}

.mfx-combo-box .unfocused-line {
    -fx-stroke: -mfx-unfocused-line-color;
}

.mfx-combo-box .focused-line {
    -fx-stroke: black;
    -fx-background-color: black;
    -mfx-thumb-hover-color: black;


}

[palexdev]

I can confirm the issue
Fixed in the latest commit on the staging branch

[palexdev]

New version released

[warmuuh]

@palexdev whatever you did, it doesnt seem to work on MFXLegacyComboBox but as it is legacy, i guess it might be considered a non-issue 🤷