How to change the icon size of a color picker in JavaFX?

Question

How to change the icon size of a color picker in javaFX. I'm having a problem, I can not increase the icon size of a color picker in JavaFX, does anyone know how to change the size of the button icon?

icon its small :(

Answer 1

Setting the CSS attributes -fx-color-rect-width and -fx-color-rect-width will change size of the rectangle displayed. Setting fx-font-size will change the size of the arrow.

Note that some of these attributes are not documented in the official JavaFX CSS reference, so I guess future JavaFX iterations could change them without notice. Still, at this stage, I think that is probably unlikely and the attributes are pretty safe to use. To determine the undocumented CSS attributes, I looked at the source code for the ColorPickerSkin.

pickme.css

.large-rect-picker {
    -fx-color-rect-width: 60px;
    -fx-color-rect-height: 60px;
    -fx-color-label-visible: false;
    -fx-min-width: 150px;
    -fx-min-height: 100px;
    -fx-pref-width: 150px;
    -fx-pref-height: 100px;
}

.large-rect-picker > .arrow-button {
    -fx-font-size: 30px;
}

PickMe.java

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.stage.Stage;

public class PickMe extends Application {

    @Override
    public void start(Stage stage) {
        ColorPicker colorPicker = new ColorPicker();
        colorPicker.getStyleClass().add("large-rect-picker");

        stage.setScene(new Scene(new Group(colorPicker)));
        stage.getScene().getStylesheets().add(
                PickMe.class.getResource(
                        "pickme.css"
                ).toExternalForm()
        );
        stage.show();
    }

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

---

Aside info on asking questions

It is difficult to know exactly what you want as you aren't really explicit in the question. For instance what do you mean by icon? The rectangle or the down arrow or both? What about the display that is popped up when you click on that arrow, should that change at all or stay the same? For future questions, I recommend you be more specific about what you are trying to achieve and how it differs from what you have. Showing code which produces what you have might also help others solve your issue. Hopefully the info above is enough for you to modify it to accomplish what you wish.

Answer 2

You can access and customize color picker by using css:

ColorPicker

Style class: color-picker

Substructure

• color display node — Label

• arrow-button — StackPane

• arrow — StackPane

The ColorPicker control has all the properties and pseudo‑classes of ComboBase

Example

.color-picker .label {
     -fx-background-color: red; 
     -fx-text-fill: null;
     -fx-graphic: url("1487868456_Other_Antivirus_Software.png");//This is icon of Color picker label


}

Result:

As far as I know you cant use -fx-width/-fx-height at all and you cant use percentage values for it. The width and height of elements are read-only. You can set -fx-pref-width, -fx-pref-height, -fx-max-width, -fx-min-width, -fx-max-height, -fx-min-height ,-fx-border-width and -fx-border-height to adjust the size of Java FX elements.

.picker-color {
    -fx-border-color:white ;  
    -fx-border-width:40;


}