4 Replies Latest reply on Oct 24, 2012 3:40 PM by wle

    Customize menu css

    ascuccimarra
      I'm trying to change the background to a Menu inside a MenuBar. I was able to change the MenuItem's background, but there's this gap at the top and at the bottom of the menu which is still gray, and I can't seem to find a way to change it.
      This is my code
      import javafx.application.Application;
      import javafx.scene.Group;
      import javafx.scene.Scene;
      import javafx.scene.control.*;
      import javafx.stage.Stage;
      
      public class CustomizeMenu extends Application {
        public static void main(String[] args) { launch(args); }
        @Override public void start(Stage stage) {
          
          MenuBar mb = new MenuBar();
          Menu menuFile = new Menu("File");
          Menu menuView = new Menu("View");
          menuView.getItems().addAll(new CheckMenuItem("All"), new CheckMenuItem("None"));
          menuFile.getItems().addAll(new MenuItem("Open"), menuView, new MenuItem("Close"));
          mb.getMenus().add(menuFile);
          Group g = new Group(mb);
          Scene scene = new Scene(g, 400, 300);
          scene.getStylesheets().add(CustomizeMenu.class.getResource("custom-menu.css").toExternalForm());
          stage.setScene(scene);
          stage.show();
        }
      }
      This is my css
      .menu  {
        -fx-background-color: blue;
        -fx-text-fill: white;
      }
      .menu-item{
          -fx-background-color: blue;
      }
      
      .menu-item .label {
        -fx-text-fill: white;
      }
      
      .menu-item:focused .label {
        -fx-text-fill: white;
      }
      Any help would be much appreciated, thanks.