I'm trying to change the text colour, font and size of the texts of the radio buttons and checkboxes in this file. I'm also trying to make the radio button have a white background with a blue border, and want to increase the size of the box for all the checkboxes.
I have tried for the radio buttons:
.radio-button
{
-fx-text-fill: #19202c;
-fx-font-size: 20;
-fx-font-family: "Plus Jakarta Sans";
}
.radio-button > .radio
{
-fx-background-color: #fff;
-fx-border-color: #044dbb;
-fx-padding: 20;
}
and for the checkbox:
#check /*My id for the checkbox is check*/
{
-fx-text-fill: #19202c;
-fx-font-size: 20;
-fx-font-family: "Plus Jakarta Sans";
}
#check > .box
{
-fx-background-color: #fff;
-fx-border-color: #044dbb;
-fx-padding: 20;
}
#check:selected .box
{
-fx-background-color: #044dbb;
}
#check:selected .mark
{
-fx-background-color: #fff;
-fx-color: #fff;
}
It didn't work. The only part that applied was the checkbox colour changing when selected. I even tried copy pasting custom css from this site and this site just to see if I was losing my mind and neither my checkbox nor radio buttons looked like the image in the site.
I gave up on modifying the buttons and tried modifying the text itself through SceneBuilder, but when I run the code, it still doesn't apply. The only exception was that I now magically had bigger boxes for the checkbox (because of increasing the font size), but hovering over them made them shrink back to their original size. I've reset the font size to the default 12px for now.
Another thing I'd like to add is that for some reason, modifying .label doesn't do anything. I had to manually add ids to every piece of text in order to style them correctly.
I've since removed a lot of what I tried from the css file because I at least need it to work in its base form if nothing else, but this is what I've got right now.
My Main.java
package application;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
//import javafx.scene.layout.VBox;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
try {
Parent root= FXMLLoader.load(getClass().getResource("/controllers/HealthProfile.fxml"));
Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("/resources/css/healthprofile.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
My FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1280.0" spacing="36.0" stylesheets="@Code/Java/HelpingHands/src/resources/css/healthprofile.css" xmlns=".0.1" xmlns:fx=";>
<children>
<VBox prefHeight="103.0" prefWidth="1268.0">
<children>
<Label id="headers" alignment="TOP_LEFT" prefHeight="39.0" prefWidth="140.0" text="Gender :">
<font>
<Font size="20.0" />
</font>
<VBox.margin>
<Insets bottom="8.0" />
</VBox.margin>
</Label>
<RadioButton fx:id="male" mnemonicParsing="false" text="Male" textFill="#19202c">
<VBox.margin>
<Insets bottom="12.0" />
</VBox.margin>
<toggleGroup>
<ToggleGroup fx:id="gender" />
</toggleGroup>
<font>
<Font name="Plus Jakarta Sans Regular" size="20.0" />
</font>
</RadioButton>
<RadioButton fx:id="female" mnemonicParsing="false" text="Female" textFill="#19202c" toggleGroup="$gender">
<font>
<Font name="Plus Jakarta Sans Regular" size="20.0" />
</font>
</RadioButton>
</children>
<opaqueInsets>
<Insets />
</opaqueInsets>
</VBox>
<VBox prefHeight="200.0" prefWidth="100.0">
<children>
<Label id="head" text="Diagnosis : " />
<Separator id="sep" prefWidth="0.0" VBox.vgrow="ALWAYS" />
<Label id="choosetxt" text="Choose all that apply.">
<VBox.margin>
<Insets top="8.0" />
</VBox.margin>
</Label>
<GridPane hgap="12.0" prefHeight="169.0" prefWidth="1208.0" vgap="36.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="697.0" minWidth="10.0" prefWidth="607.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="605.0" minWidth="10.0" prefWidth="601.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="605.0" minWidth="10.0" prefWidth="601.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<CheckBox id="check" fx:id="diabetescheck" mnemonicParsing="false" text="Diabetes" textFill="#19202c">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" fx:id="hypercheck" mnemonicParsing="false" text="Hypertension" textFill="#19202c" GridPane.rowIndex="1">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Low Blood Pressure" textFill="#19202c" GridPane.rowIndex="2">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" layoutX="10.0" layoutY="64.0" mnemonicParsing="false" text="Arthritis" textFill="#19202c" GridPane.rowIndex="3">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" layoutX="10.0" layoutY="9.0" mnemonicParsing="false" text="Chronic Bronchitis" textFill="#19202c" GridPane.columnIndex="1">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Fatty Liver" textFill="#19202c" GridPane.columnIndex="1" GridPane.rowIndex="1">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Osteoporosis" textFill="#19202c" GridPane.columnIndex="1" GridPane.rowIndex="2">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Chronic Kidney Disease" textFill="#19202c" GridPane.columnIndex="1" GridPane.rowIndex="3">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Asthma" textFill="#19202c" GridPane.columnIndex="2">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Cancer" textFill="#19202c" GridPane.columnIndex="2" GridPane.rowIndex="1">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Dementia" textFill="#19202c" GridPane.columnIndex="2" GridPane.rowIndex="2">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Alzheimer's" textFill="#19202c" GridPane.columnIndex="2" GridPane.rowIndex="3">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
</children>
<VBox.margin>
<Insets top="32.0" />
</VBox.margin>
</GridPane>
<HBox fillHeight="false" prefHeight="0.0" prefWidth="398.0" spacing="8.0">
<children>
<CheckBox id="check" mnemonicParsing="false" text="Other:" textFill="#19202c">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<TextField fx:id="otherdis" prefHeight="8.0" prefWidth="242.0" />
</children>
</HBox>
</children>
</VBox>
</children>
</VBox>
My css
@font-face {
src: url(../fonts/PlusJakartaSans-Regular.ttf);
}
@font-face {
src: url(../fonts/PlusJakartaSans-Medium.ttf);
}
@font-face {
src: url(../fonts/PlusJakartaSans-SemiBold.ttf);
}
@font-face {
src: url(../fonts/PlusJakartaSans-Bold.ttf);
}
#headers
{
-fx-font-family: "Plus Jakarta Sans Medium";
-fx-font-size: 24px;
-fx-text-fill: #19202c;
}
#small-text, #choosetxt
{
-fx-font-family: "Plus Jakarta Sans";
-fx-font-size: 18px;
-fx-text-fill: #aeaeae;
}
.radio-button:selected > .radio > .dot {
-fx-background-color: #044dbb;
-fx-background-insets: 0;
}
#choosetxt
{
-fx-font-family: "Plus Jakarta Sans Medium";
-fx-text-fill: #7098d4
}
#check .box
{
-fx-background-color: #fff;
-fx-padding: 20;
}
#check:selected .box
{
-fx-background-color: #044dbb;
}
#check:selected .mark
{
-fx-background-color: #fff;
-fx-color: #fff;
}
#head
{
-fx-font-size: 28px;
-fx-font-family: "Plus Jakarta Sans SemiBold";
}
I'm trying to change the text colour, font and size of the texts of the radio buttons and checkboxes in this file. I'm also trying to make the radio button have a white background with a blue border, and want to increase the size of the box for all the checkboxes.
I have tried for the radio buttons:
.radio-button
{
-fx-text-fill: #19202c;
-fx-font-size: 20;
-fx-font-family: "Plus Jakarta Sans";
}
.radio-button > .radio
{
-fx-background-color: #fff;
-fx-border-color: #044dbb;
-fx-padding: 20;
}
and for the checkbox:
#check /*My id for the checkbox is check*/
{
-fx-text-fill: #19202c;
-fx-font-size: 20;
-fx-font-family: "Plus Jakarta Sans";
}
#check > .box
{
-fx-background-color: #fff;
-fx-border-color: #044dbb;
-fx-padding: 20;
}
#check:selected .box
{
-fx-background-color: #044dbb;
}
#check:selected .mark
{
-fx-background-color: #fff;
-fx-color: #fff;
}
It didn't work. The only part that applied was the checkbox colour changing when selected. I even tried copy pasting custom css from this site and this site just to see if I was losing my mind and neither my checkbox nor radio buttons looked like the image in the site.
I gave up on modifying the buttons and tried modifying the text itself through SceneBuilder, but when I run the code, it still doesn't apply. The only exception was that I now magically had bigger boxes for the checkbox (because of increasing the font size), but hovering over them made them shrink back to their original size. I've reset the font size to the default 12px for now.
Another thing I'd like to add is that for some reason, modifying .label doesn't do anything. I had to manually add ids to every piece of text in order to style them correctly.
I've since removed a lot of what I tried from the css file because I at least need it to work in its base form if nothing else, but this is what I've got right now.
My Main.java
package application;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Parent;
import javafx.scene.Scene;
//import javafx.scene.layout.VBox;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
try {
Parent root= FXMLLoader.load(getClass().getResource("/controllers/HealthProfile.fxml"));
Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("/resources/css/healthprofile.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
My FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1280.0" spacing="36.0" stylesheets="@Code/Java/HelpingHands/src/resources/css/healthprofile.css" xmlns="http://javafx/javafx/23.0.1" xmlns:fx="http://javafx/fxml/1">
<children>
<VBox prefHeight="103.0" prefWidth="1268.0">
<children>
<Label id="headers" alignment="TOP_LEFT" prefHeight="39.0" prefWidth="140.0" text="Gender :">
<font>
<Font size="20.0" />
</font>
<VBox.margin>
<Insets bottom="8.0" />
</VBox.margin>
</Label>
<RadioButton fx:id="male" mnemonicParsing="false" text="Male" textFill="#19202c">
<VBox.margin>
<Insets bottom="12.0" />
</VBox.margin>
<toggleGroup>
<ToggleGroup fx:id="gender" />
</toggleGroup>
<font>
<Font name="Plus Jakarta Sans Regular" size="20.0" />
</font>
</RadioButton>
<RadioButton fx:id="female" mnemonicParsing="false" text="Female" textFill="#19202c" toggleGroup="$gender">
<font>
<Font name="Plus Jakarta Sans Regular" size="20.0" />
</font>
</RadioButton>
</children>
<opaqueInsets>
<Insets />
</opaqueInsets>
</VBox>
<VBox prefHeight="200.0" prefWidth="100.0">
<children>
<Label id="head" text="Diagnosis : " />
<Separator id="sep" prefWidth="0.0" VBox.vgrow="ALWAYS" />
<Label id="choosetxt" text="Choose all that apply.">
<VBox.margin>
<Insets top="8.0" />
</VBox.margin>
</Label>
<GridPane hgap="12.0" prefHeight="169.0" prefWidth="1208.0" vgap="36.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="697.0" minWidth="10.0" prefWidth="607.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="605.0" minWidth="10.0" prefWidth="601.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="605.0" minWidth="10.0" prefWidth="601.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<CheckBox id="check" fx:id="diabetescheck" mnemonicParsing="false" text="Diabetes" textFill="#19202c">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" fx:id="hypercheck" mnemonicParsing="false" text="Hypertension" textFill="#19202c" GridPane.rowIndex="1">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Low Blood Pressure" textFill="#19202c" GridPane.rowIndex="2">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" layoutX="10.0" layoutY="64.0" mnemonicParsing="false" text="Arthritis" textFill="#19202c" GridPane.rowIndex="3">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" layoutX="10.0" layoutY="9.0" mnemonicParsing="false" text="Chronic Bronchitis" textFill="#19202c" GridPane.columnIndex="1">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Fatty Liver" textFill="#19202c" GridPane.columnIndex="1" GridPane.rowIndex="1">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Osteoporosis" textFill="#19202c" GridPane.columnIndex="1" GridPane.rowIndex="2">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Chronic Kidney Disease" textFill="#19202c" GridPane.columnIndex="1" GridPane.rowIndex="3">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Asthma" textFill="#19202c" GridPane.columnIndex="2">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Cancer" textFill="#19202c" GridPane.columnIndex="2" GridPane.rowIndex="1">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Dementia" textFill="#19202c" GridPane.columnIndex="2" GridPane.rowIndex="2">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<CheckBox id="check" mnemonicParsing="false" text="Alzheimer's" textFill="#19202c" GridPane.columnIndex="2" GridPane.rowIndex="3">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
</children>
<VBox.margin>
<Insets top="32.0" />
</VBox.margin>
</GridPane>
<HBox fillHeight="false" prefHeight="0.0" prefWidth="398.0" spacing="8.0">
<children>
<CheckBox id="check" mnemonicParsing="false" text="Other:" textFill="#19202c">
<font>
<Font name="Plus Jakarta Sans Medium" size="12.0" />
</font>
</CheckBox>
<TextField fx:id="otherdis" prefHeight="8.0" prefWidth="242.0" />
</children>
</HBox>
</children>
</VBox>
</children>
</VBox>
My css
@font-face {
src: url(../fonts/PlusJakartaSans-Regular.ttf);
}
@font-face {
src: url(../fonts/PlusJakartaSans-Medium.ttf);
}
@font-face {
src: url(../fonts/PlusJakartaSans-SemiBold.ttf);
}
@font-face {
src: url(../fonts/PlusJakartaSans-Bold.ttf);
}
#headers
{
-fx-font-family: "Plus Jakarta Sans Medium";
-fx-font-size: 24px;
-fx-text-fill: #19202c;
}
#small-text, #choosetxt
{
-fx-font-family: "Plus Jakarta Sans";
-fx-font-size: 18px;
-fx-text-fill: #aeaeae;
}
.radio-button:selected > .radio > .dot {
-fx-background-color: #044dbb;
-fx-background-insets: 0;
}
#choosetxt
{
-fx-font-family: "Plus Jakarta Sans Medium";
-fx-text-fill: #7098d4
}
#check .box
{
-fx-background-color: #fff;
-fx-padding: 20;
}
#check:selected .box
{
-fx-background-color: #044dbb;
}
#check:selected .mark
{
-fx-background-color: #fff;
-fx-color: #fff;
}
#head
{
-fx-font-size: 28px;
-fx-font-family: "Plus Jakarta Sans SemiBold";
}
- "Linking it instead of embedding the code because it's very big and I'm hitting the character limit " Please create a minimal reproducible example. At a minimum it will make it easier for others to help you, but linking external code is discouraged on this site, as the link may go stale and make the question less useful for future users. You only need a small FXML file and a small CSS file to demonstrate this issue in a complete example. – James_D Commented yesterday
- I've edited the post to include only the checkbox and radio button parts of the FXML and CSS. Will this do or do I need to make it shorter? – NoSleepTonight Commented yesterday
- This basically seems to work for me, though I don't really understand what you're trying to do. You seem to have styled everything twice (once in the FXML, where you have specified everything's font, color, etc., and then separately in the CSS file, which you also seem to add twice). Can you explain what you are seeing that is different to what you want to see? – James_D Commented yesterday
- 1 Default radio button and checkbox styling is in modena.css, start from understanding that. Copy relevant parts of the default CSS into your own (initially empty) CSS file, adding and changing one thing at a time until you get the result you want. Anyway, that is my suggestion. – jewelsea Commented yesterday
- 1 So what are you actually asking at this point? The code you posted is basically working as expected. For example, the title includes asking why setting the font size on the check boxes in CSS doesn't work, but you are not setting the font sizes on the check boxes in CSS. So it's really not clear what you are asking. – James_D Commented 18 hours ago
1 Answer
Reset to default -2I was working on this project on a separate branch in Git and while this theoretically shouldn't be possible, it seems my CSS was not properly applying itself until I merged the branch into main. Afterwards, the CSS applied perfectly to the file, without having to make any additional changes.
So if your CSS doesn't apply to your FXML file despite the code logically being correct and you were working on a separate branch like I was, merging your branch into your main/master may be the solution.