remove effect of javafx components on hover

Question

I am trying to style, with a css, javafx combobox, as default on hover it has some effect, like shadow, I wanted to remove it, but I don't know what effect is? Every time you hover a ComboBox the area around it becames increasingly blacker... How can i remove that with css, I have already tried this rulle

#myComboBox:hover{
    -fx-effect:null;
}

but it doesn't work((

I attach an image to explain better:

Answer 1

Note

The image you show in your updated question has a very large, thick black border around it, which is non-standard. To achieve that there must be some other non-standard CSS or effect you have applied to your UI (which is contained in code that you do not provide). Remove whatever extraneous styling you have applied to your UI and the UI will not display with the thick black border that you currently see.

Solution

This is general information on modification of CSS style based upon hover or other pseudo-class specific settings.

#myComboBox:hover {
    -fx-color: -fx-base;
}

#myComboBox:showing {
    -fx-color: -fx-base;
}

The above style definitions will remove any "effect" applied to the ComboBox button for hovering the button and showing the ComboBox list.

If you also wish to get rid of the blue focus ring, then see:

• How do I remove the default border glow of a JavaFX button (when selected)?

In general, I do not recommend removing default styling for hover, focus, arm, etc. as then the user may lose valuable feedback as to the UI state, making for a less intuitive interface.

Sample App

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ComboStyle extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    private static final String[] items = {
            "Apples",
            "Oranges",
            "Pears",
            "Lemons"
    };

    @Override
    public void start(Stage stage) {
        ComboBox<String> myComboBox = new ComboBox<>();
        myComboBox.setId("myComboBox");
        myComboBox.getItems().addAll(items);
        myComboBox.getSelectionModel().select(3);

        ComboBox<String> standardComboBox = new ComboBox<>();
        standardComboBox.getItems().addAll(items);
        standardComboBox.getSelectionModel().select(3);

        VBox layout = new VBox(
                10,
                new Button("Button"),
                myComboBox,
                standardComboBox
        );
        layout.setPadding(new Insets(50));
        Scene scene = new Scene(layout);
        scene.getStylesheets().add(
                getClass().getResource(
                    "combo-style.css"
                ).toExternalForm()
        );

        stage.setScene(scene);
        stage.show();
    }
}

Background

There are lots of "effects" that are applied to JavaFX controls depending upon the control state. Example states are focus, hover, arm, etc. None of them are actually defined as Effects though. Instead the CSS based visual changes in JavaFX are almost always achieved by modifications to layered backgrounds colors with insets.

-fx-background-color <paint> [ , <paint> ]* A series of paint values separated by commas.

-fx-background-insets <size> | <size> <size> <size> <size> [ , [ <size> | <size> <size> <size> <size>] ]* A series of size values or sets of four size values, separated by commas. A single size value means all insets are the same. Otherwise, the four values for each inset are given in the order top, right, bottom, left. Each comma-separated value or set of values in the series applies to the corresponding background color.

In turn these background colors are usually defined based upon looked-up colors.

With looked-up colors you can refer to any other color property that is set on the current node or any of its parents. This is a very powerful feature, as it allows a generic palette of colors to be specified on the scene then used thoughout the application. If you want to change one of those palette colors you can do so at any level in the scene tree and it will affect that node and all its decendents. Looked-up colors are not looked up until they are applied, so they are live and react to any style changes that might occur, such as replacing a palette color at runtime with the "style" property on a node.

In the following example, all background color of all buttons uses the looked up color "abc".

.root { abc: #f00 } .button { -fx-background-color: abc }

The different states such as focus, hover, arm, etc. are usually modeled as pseudo-classes.

To understand the css definitions, background layers, insets, pseudo-classes and looked-up colors used in the default JavaFX 8 CSS stylesheet, look up the modena.css file in the jfxrt.jar that ships with your Java installation.