Home Ask Login Register

Developers Planet

Your answer is one click away!

Sergey Razuvaev February 2016

Styling of subelement of RadioButton in JavaFX using CSS

I'm trying to change the appearance of the RadioButton in JavaFX by using CSS, but facing the problem. According to the JavaFX CSS Reference Guide element structure consists of subelements:

   radio — Region
      dot — Region
   label — Label

Subelement radio stylized in modena.css:

.radio-button > .radio,
.radio-button:focused > .radio  {
   -fx-background-radius: 1.0em;
   -fx-padding: 0.333333em;

By overriding these style classes are configurable appearance of subelement. Sub .dot stylized too. But... if I try to add code to subelement label, for example:

.radio-button > .label,
.radio-button:focused > .label {
   -fx-background-color: rgb(200,200,200);

...nothing happens. How to stylize this sub? And is there a way to look at the internal structure of the element and css properties that you can change these elements (except JavaFX CSS Reference Guide)?


johaaachim February 2016

You don't need to style the label explicitly.

If you want to change the label's color, you can do so pretty easily:

.radio-button {
    -fx-text-fill: yourColor;

bonfatti February 2016

The sub element you are trying to stylize is actually a LabeledText object that extends javafx.scene.text.Text. As you can see from JavaFX CSS Reference Guide : Text it has its own properties plus the ones of font and Shape. None of these properties lets you customize the *Label" area, only the text.

My sugestion is to use a radio button without text and place a "label" beside it using other components that can be customized.

Sergey Razuvaev February 2016

The second part of the question I'll answer myself. To display the structure and properties of elements JavaFX I wrote the utility. Perhaps someone will find it useful.

public class CssMetaDataExtractor extends Application {
private Stage primaryStageLink;
private Scene primaryScene;
private SplitPane rootNode;
private Group group;
private TreeView<String> structureTV;
private Component structureRoot;
private TreeView<String> nodePropertiesTV;
private TreeItem<String> nodePropertiesRoot;
private TreeTableView<CMDComponent> cssPropertiesTV;
private TreeItem<CMDComponent> cssPropertiesRoot;

public static void main(String[] args) {

public void start(Stage primaryStage) {
    primaryStageLink = primaryStage;
    primaryScene.getStylesheets().add( CssMetaDataExtractor.class.getResource("test.css").toExternalForm() );
    /* Create and tune your element here... */
    ProgressBar pb = new ProgressBar();
    /* ...and add element here... */
    processElement( pb );

private void processElement(Node node) {
    if ( node instanceof Parent ) {
        extractCssMetaData((Parent)node, null);
        node.addEventHandler(Event.ANY, (Event event) -> {
            Component selected = (Component)structureTV.getSelectionModel().selectedItemProperty().getValue();
            showCssProperties( selected );
            showNodeProperties( selected );
private void extractCssMetaData(Parent node, Component parent) {
    Component currentParent = parent;
    if (parent == null) {
        structureRoot = new Component( node );
        currentParent = structureRoot;
        primaryStageLink.setTitle("CssMetaDataExtractor for [" + node.getClass().getName() + "]");
    for (Node subNode : node.getChildrenUnmodifiable()) {
        Component child = new Component( subNode );

Post Status

Asked in February 2016
Viewed 2,994 times
Voted 13
Answered 3 times


Leave an answer

Quote of the day: live life