title: How do you set the style for a JavaFX ContextMenu using css?
body: <p>I am trying to change the style of a <code>ContextMenu</code> item using a seperate CSS file. I looked at the caspian.css section and found the following definitions:</p>
  
  <ul>
  <li>.context-menu </li>
  <li>.context-menu .separator</li>
  <li>.context-menu .scroll-arrow</li>
  <li>.context-menu .scroll-arrow:hover</li>
  <li>.context-menu:show-mnemonics .mnemonic-underline</li>
  </ul>
  
  <p>I copied those over exactly to my css file and changed just the background color values as a test:</p>
  
  <pre><code>.context-menu {
      -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
      -fx-background-color: #006699;
      -fx-background-insets: 0, 1, 2;
      -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
  /*    -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em;  8 1 8 1 */
      -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
  }
  
  .context-menu .separator {
      -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
  }
  
  .context-menu .scroll-arrow {
      -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
      -fx-background-color: #006699;
  }
  
  .context-menu .scroll-arrow:hover {
      -fx-background: -fx-accent;
      -fx-background-color: #006699;
      -fx-text-fill: -fx-selection-bar-text;
  }
  
  .context-menu:show-mnemonics .mnemonic-underline {
      -fx-stroke: -fx-text-fill;
  }
  </code></pre>
  
  <p>This obviously does not work or I would not be here. It seems to have no effect no matter what values I change. </p>
  
  <p>I opened up JavaFX Scene Builder to take a look (side note I used this as a last resort, as I find it pretty clumsy to use). I noticed under the Styleable Parts of the css section for the context menu that is lists <code>CSSBridge[context-menu]</code> which seems odd. Other things like Label have <code>Label[label]</code>. </p>
  
  <p><strong>Can anybody explain to me what is going on here, as it appears to be ignoring my css file for context menus and using the default values in caspian.css?</strong></p>
  
  <hr />
  
  <p>Attaching sample FXML file, css and java code to run.</p>
  
  <p><strong>Sample.fxml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import java.lang.*?&gt;
  &lt;?import java.net.*?&gt;
  &lt;?import javafx.scene.*?&gt;
  &lt;?import javafx.scene.control.*?&gt;
  &lt;?import javafx.scene.image.*?&gt;
  &lt;?import javafx.scene.layout.*?&gt;
  
  &lt;AnchorPane fx:id="myroot" xmlns:fx="http://javafx.com/fxml"&gt;
    &lt;children&gt;
      &lt;Label text="Right click for options"&gt;
        &lt;contextMenu&gt;
          &lt;ContextMenu&gt;
            &lt;items&gt;
              &lt;MenuItem text="Help" /&gt;
              &lt;MenuItem text="Me" /&gt;
            &lt;/items&gt;
          &lt;/ContextMenu&gt;
        &lt;/contextMenu&gt;
      &lt;/Label&gt;
    &lt;/children&gt;
    &lt;stylesheets&gt;
      &lt;URL value="@contextcolor.css" /&gt;
    &lt;/stylesheets&gt;
  &lt;/AnchorPane&gt;
  </code></pre>
  
  <p><strong>contextcolor.css</strong></p>
  
  <pre><code>.root {
    -fx-background-color: cornsilk; 
    -fx-padding: 10;
  }
  
  .context-menu {
    -fx-background-color: #006699;
    -fx-text-fill: white;
  }
  
  .menu-item .label {
    -fx-text-fill: yellow;
  }
  
  .menu-item:focused .label {
    -fx-text-fill: white;
  }
  </code></pre>
  
  <p><strong>Test.java</strong></p>
  
  <pre><code>import javafx.application.Application;
  import javafx.fxml.FXMLLoader;
  import javafx.scene.Parent;
  import javafx.scene.Scene;
  import javafx.stage.Stage;
  
  public class Test extends Application {
  
      public static void main(String[] args) {
          Application.launch(Test.class, args);
      }
  
      @Override
      public void start(Stage stage) throws Exception {
          System.out.println(com.sun.javafx.runtime.VersionInfo.getVersion());
  
          Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
  
          stage.setScene(new Scene(root));
          stage.show();
      }
  }
  </code></pre>