title: How to change CSS style of JFoenix Color Picker library?
body: <p>I'm making some function in my application with JavaFX and Scene Builder</p>
  
  <p>I can pick a color when clicking on JFoenix Color Picker and then this color applies to my label background</p>
  
  <p>I made JFOenix Color Picker look like an icon. I had changed the standart appearence of Color Picker to my image</p>
  
  <p>Problem #1:
  Color Picker is totally filled with white color  when I lanch a program first time and then it become looks like my icon when I move the mouse over it.</p>
  
  <p>Problem #2:When I click my icon with Color Picker  ripple effect works, but I don't need any ripple effect or animation when I click on Color Picker</p>
  
  <p>Problem #3: JFoenix Color Picker also applies chosen color to it's own background and it's appearence  become to icon image again when I move mouse over it again</p>
  
  <p>Problem #4:
  When Color Picker is placed in Stack Pane The Color Picker dialog window appears only when I click on left side of the icon, it looks like right side of Color Picker icon is disabled, but I need Color Picker dialog window to be appeared when I click to any part of Color Picker icon</p>
  
  <p>I was searching into CSS files of JFoniex Color Picker, but there is no any documentation how to customize properly Color Picker in CSS. </p>
  
  <p>Please, help me as much as you can</p>
  
  <p>*I had an idea to use toggle button(I know how to customize it to my own needs)  and place Color Picker backward this toggle button and make opacity 0. But I don't know how to make Color Picker dialog window open When I click on toggle button.  Any ideas?</p>
  
  <p>I use method that is called when I click Color Picker to fill label's background with color. </p>
  
  <p>Controller class:</p>
  
  <pre><code>@FXML  private Label category1;
  @FXML  private JFXColorPicker colorPickerCategory;
  
  @FXML
    void changeCategoryColor(ActionEvent event) {
  
      Color selectedColor = colorPickerCategory.getValue();
      category1.setBackground(new Background(new BackgroundFill(Paint.valueOf(selectedColor.toString()), CornerRadii.EMPTY, Insets.EMPTY)));
  
    }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.jfx-color-picker .color-box {
      -fx-background-image: url("resources/palette.png");
      -fx-background-color: transparent;
      -fx-background-repeat: no-repeat;
      -fx-background-position: center;
      -fx-background-size: contain;
  }
  
  
  .jfx-color-picker:armed,
  .jfx-color-picker:hover,
  .jfx-color-picker:focused,
  .jfx-color-picker {
      -fx-background-color: transparent, transparent, transparent, transparent;
      -fx-background-insets: 0px;
  }
  
  
  .color-picker &gt; .color-picker-label &gt; .picker-color &gt; .picker-color-rect {
      -fx-stroke: null;
      -fx-fill : null;
  }
  
  .color-picker {
      -fx-background-color: transparent;
      -fx-color-label-visible: false;
  }
  .color-picker  .color-picker-label  .picker-color  {
      -fx-alignment: center;
  }
  
  .color-picker .color-picker-label .text {
      -fx-fill: transparent;
  }
  
  .jfx-color-picker:default{
      -fx-background-color: transparent;
  }
  </code></pre>
  
  <p><a href="https://hdd.tomsk.ru/desk/thsytwml#" rel="nofollow noreferrer">Video</a></p>
  
  <p><a href="https://i.stack.imgur.com/Jtm3l.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jtm3l.jpg" alt="enter image description here"></a>Scene Builder Screen</p>