Question

I want to make a ChoiceBox transparent, so that it looks like a label. Is it possible to hide the arrow on the right and the background? The Popup should be like default. Which CSS-Classes do I have to use here?

Best regards

Was it helpful?

Solution


Website for this kind of information on css in jfx: CSS Reference Guide

Here is how you can manipulate the nodes inside of a coice box:

.choice-box > .open-button > .arrow{
    /* Example: -fx-opacity: 0; */
}

You basically just need to step through all nodes that are inside the choicebox to be able to manipulate the arrow.

If you need any further information i will provide it if i can :)

Hope it helps,
Laurenz

EDIT: that's the full solution:

.choice-box > .open-button > .arrow{
    -fx-opacity: 0;
}

.choice-box{
    -fx-background-color: transparent;
}

EDIT2: how to use css on nodes with applied id/class?

    #mycombobox > .open-button > .arrow{
        -fx-opacity: 0;
    }

    #mycombobox{
        -fx-background-color: transparent;
    }

Use with CSS class:

    .mycombobox > .open-button > .arrow{
        -fx-opacity: 0;
    }

    .mycombobox{
        -fx-background-color: transparent;
    }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top