如何让JFoenix的JFXToggleButton呈现普通JavaFX ToggleButton样式而非开关样式？

Got it, I've run into this exact issue with JFoenix's JFXToggleButton before—its default switch-style UI is great for toggle switches, but sometimes you just need that classic rectangular button look matching standard JavaFX ToggleButtons. Here are two reliable ways to pull this off:

Method 1: Reuse Standard JavaFX ToggleButton Styles #

The simplest approach is to strip away JFoenix's default switch styling and apply native JavaFX ToggleButton styles directly. Since JFoenix components are built on top of JavaFX, this works seamlessly:

// Create your JFXToggleButton instance
JFXToggleButton classicToggle = new JFXToggleButton("Enable Feature");

// Remove JFoenix's default switch style class
classicToggle.getStyleClass().remove("jfx-toggle-button");

// Add the standard JavaFX ToggleButton style class
classicToggle.getStyleClass().add("toggle-button");

This will make your JFXToggleButton look and behave exactly like a native JavaFX ToggleButton—including default hover, pressed, and selected states. No extra CSS needed!

If you're using FXML, you can do the same by setting the style class directly:

<JFXToggleButton text="Enable Feature">
    <styleClass>
        <String fx:value="toggle-button" />
    </styleClass>
</JFXToggleButton>

Method 2: Customize with CSS (For Full Control) #

If you want to retain some JFoenix functionality but tweak the appearance to be rectangular (and add custom colors, for example), use CSS to override the default switch styles:

First, define this CSS in your stylesheet:

/* Custom rectangular toggle button style */
.rect-jfx-toggle .jfx-toggle-button {
    -jfx-toggle-color: #4CAF50; /* Background color when selected */
    -jfx-untoggle-color: #f0f0f0; /* Background color when unselected */
    -fx-text-fill: #333; /* Text color */
    -fx-background-radius: 0; /* Remove rounded corners for strict rectangle */
    -fx-padding: 6 18; /* Adjust padding to control button size */
}

/* Hide the default switch thumb (the sliding part) */
.rect-jfx-toggle .jfx-toggle-button .thumb {
    visibility: hidden;
}

/* Adjust the track to match the button background */
.rect-jfx-toggle .jfx-toggle-button .track {
    -fx-background-radius: 0;
    -fx-background-color: inherit;
}

Then apply the style class to your button in code:

JFXToggleButton customRectToggle = new JFXToggleButton("Custom Rect Toggle");
customRectToggle.getStyleClass().add("rect-jfx-toggle");

This lets you keep JFoenix's underlying features (like subtle animations) while giving you full control over the button's rectangular appearance.

内容的提问来源于stack exchange，提问作者Brad Turek