CODEWITHSUNDEEP
cssjavafx
VANILKA
VANILKA

Reputation: 684

CSS Change radio button color in JFXRadioButton

I have a problem with styling JFXRadioButton from this library : jfoenix.com

I would like to change the color or circle, but default class didn't work. Have you to any ideas?

(Colors for tests only.. )

.radioButtonFX .radio:selected {
    -fx-background-color: yellow;
}

.radioButtonFX .radio-button .radio:selected {
    -fx-background-color: blue;
}

I would like also change the color of JFXRippler and the line for selected tab in JFXTabPane

Upvotes: 2

Views: 4079

Answers (1)

fabian
fabian

Reputation: 82491

JFXRadioButton assigns the color from code. This takes precedence over values assigned. The only way to modify this from CSS is using the -fx-selected-color and -fx-unselected-color properties of the JFXRadioButton itself:

.jfx-radio-button {
    -fx-selected-color: yellow;
    -fx-unselected-color: blue;
}

As for the rippler color

.jfx-rippler {
    -fx-rippler-fill: lime;
}

and the line below the selected tab

.jfx-tab-pane .tab-selected-line {
    -fx-stroke: red;
}

Note that there is a getCssMetaData method in Node, which allows you to retrieve a list of available properties.

radio.getCssMetaData().stream().map(CssMetaData::getProperty).forEach(System.out::println);

The last properties should be the one of the JFX control...

This does not work for JTabPane however, since those are properties of a child of the Node. For that info it seems to be necessary to dig through the code of the default skin for JFXTabPane, since JFoenix seems to have done a awful job at writing propert documententatiion for it's classes.

Upvotes: 2

Related Questions