CSS Customization of MFXFilterComboBox

[todayifeeltired]

I just might not be able to do it, but how can i (for example) change the color of the popup-background?
i saw that you listed the css-selectors, but i just dont get it

<MFXFilterComboBox styleClass="filterableComboBox"> </MFXFilterComboBox>

do i have to set a custom styleclass?
if yes (or no) how can i access .mfx-combo-box .combo-popup in my styleclass?

update: i got how to access .mfx-combo-box .combo-popup, BUT:
the items, the searchfield is now in "dark mode" but there is still a border around it or a pane that still is white and i dont know to access it

i got (quick & dirty)
`.mfx-filter-combo-box {
-fx-text-fill: white;
-fx-background-color: derive(rgb(50, 50, 50), 20%);
-mfx-caret-visible: false;
}

.mfx-filter-combo-box .combo-popup .virtual-flow {
-fx-background-color: transparent;
-fx-background-radius: 0;
-fx-max-height: 400;
-fx-min-height: 400;
-fx-min-width: 300;
-fx-max-width: 300;
}

.mfx-filter-combo-box .combo-popup .search-field {
-fx-background-color: derive(rgb(50, 50, 50), 20%);
-fx-text-fill: white;
-mfx-gap: 0;
-mfx-float-mode: disabled;
-fx-padding: 5;
-fx-display-caret: false;
}

.mfx-combo-box .combo-popup .virtual-flow .mfx-combo-box-cell {
-fx-background-color: derive(rgb(50, 50, 50), 20%);
}

.mfx-combo-box .combo-popup .virtual-flow .data-label {
-fx-text-fill: white;
}`

update 2:
the problem seems to be "mfx-filter-combo-box .combo-popup .search-container":
as in issue #131, if i give this id to my combobox, the styling works

[palexdev]

I can confirm the issue but I have no idea on how to fix it yet, it seems like the combo box stylesheet is always prioritized over everything else for some reason

[todayifeeltired]

is it possible to just delete your combo-box stylesheet and i can set my own?

[palexdev]

No it's not possible because that stylesheet is the userAgentStylesheet

[palexdev]

@todayifeeltired
I arranged a fix hoping that it won't happen anymore in any other situation
This is what I've achieved

This is the CSS I've used:

.mfx-filter-combo-box {
	-fx-background-color: derive(#323232, 20%);
	-fx-border-color: transparent;
	-mfx-caret-visible: false;
	-mfx-float-mode: disabled;
	-fx-text-fill: white;
}

.mfx-filter-combo-box .caret .mfx-ripple-generator {
	-mfx-ripple-color: rgba(255, 255, 255, 0.2);
}

.mfx-filter-combo-box .caret .mfx-font-icon {
	-mfx-color: white
}

.mfx-filter-combo-box .combo-popup .search-container {
	-fx-background-color: derive(#323232, 20%);
	-fx-background-radius: 5;
	-fx-border-color: transparent;
	-fx-padding: 10 5 5 5;
}

.mfx-filter-combo-box .combo-popup .search-field {
	-fx-background-color: derive(#323232, 20%);
	-fx-text-fill: white;
}

.mfx-filter-combo-box .combo-popup .search-field .text-field {
	-fx-prompt-text-fill: #ebebeb;
}

.mfx-filter-combo-box .combo-popup .virtual-flow {
	-fx-background-color: transparent;
}

.mfx-filter-combo-box .combo-popup .virtual-flow .mfx-combo-box-cell .data-label {
	-fx-text-fill: white;
}

.mfx-filter-combo-box .combo-popup .virtual-flow .mfx-combo-box-cell:hover {
	-fx-background-color: white;
}

.mfx-filter-combo-box .combo-popup .virtual-flow .mfx-combo-box-cell:hover .data-label {
	-fx-text-fill: rgba(0, 0, 0, 0.87);
}

.mfx-filter-combo-box .combo-popup .virtual-flow .mfx-combo-box-cell:selected {
	-fx-background-color: white;
}

.mfx-filter-combo-box .combo-popup .virtual-flow .mfx-combo-box-cell:selected .data-label {
	-fx-text-fill: rgb(0, 0, 0, 0.87);
}

A little bit of patience though, there are some other minor fixes to do before releasing the new minor version

[todayifeeltired]

thank you very much!
looked at the screenshot and it really looks beautiful.
do you have an idea when the release is planned for or should it already be working?
Thanks again!

[palexdev]

Thank you for using MaterialFX

I'd say as soon as #174 provides a MRE so that I can fix it. I hope for today though

[palexdev]

Version 11.13.5 is now available hope it works well now, let me know!

[todayifeeltired]

thanks for keeping me updatet :)
it works fine and i am very happy about/with it!
thanks for the work you put it !!