Javafx 2.0 : How to change the size of the radio-buttons circle with CSS?

fxml, javafx, javafx-2, scenebuilder

Solution

`-fx-padding: 10px;`

A single padding value means that all padding are the same, if a set of four padding values is specified, they are used for the top, right, bottom, and left edges of the region.

from the JavaFX CSS Reference Guide

Example:

CssTest.java

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class CssTest extends Application 
{
    public void start(Stage stage) throws Exception
    {
        BorderPane root = new BorderPane();
        RadioButton radio = new RadioButton("radio-text");
        root.setCenter(radio);
        root.getStylesheets().add(getClass().getResource("/radio.css").toExternalForm());
        stage.setScene(new Scene(root));
        stage.show();
    }

    public static void main(String[] args)
    {
        launch(args);
    }
}

radio.css

.radio-button .radio {
    -fx-border-width: 1px;
    -fx-border-color: #000;
    -fx-background-color: white;
    -fx-background-image: null;
    -fx-border-radius: 15px;
    -fx-padding: 4px;
}
.radio-button .radio:selected {
    -fx-background-color: white;
    -fx-background-image: null;
}
.radio-button -radio:armed {
    -fx-background-color: white;
    -fx-background-image: null;
}
.radio-button -radio:determinate {
    -fx-background-color: white;
    -fx-background-image: null;
}
.radio-button -radio:indeterminate {
    -fx-background-color: white;
    -fx-background-image: null;
}
.radio-button .dot {
    -fx-background-radius: 15px;
    -fx-padding: 8px;
}

result

For more inspirational JavaFX CSS themes, check win7glass.css from GreggSetzer/JavaFX-CSS-Themes

Problem

Original source