javafx-2, remove focus highlighting via CSS

Question

I want to remove the blue border that surronds a TableView when it is focused.

I checked into the caspian.css, that for most components like Button and TextField, does something like:

.table-view:focused {
  -fx-background-color: -fx-focus-color,-fx-box-border,-fx-control-inner-background;
  -fx-background-insets: -1.4, 0, 1;
  -fx-background-radius: 1.4, 0, 0;
  /*....*/
  -fx-padding: 1; /* 0.083333em; */
}

My question is about CSS, at the end. Can I override this pseudoclass specification in my stylesheet instead of trying to turn the colors into transparent?

Solution 1

Yes you can. In your stylesheet define exactly the same CSS selector with JavaFX CSS properties of your own choice like this:

.table-view:focused {
  -fx-background-color: red /* or transparent or other preferred color */,-fx-box-border,-fx-control-inner-background;
  -fx-background-insets: -1.4, 0, 1;
  -fx-background-radius: 1.4, 0, 0;
  /*....*/
  -fx-padding: 1; /* 0.083333em; */
}

Solution 2

Because JavaFX 8 has a new theme 'modena' but with the same old problem I want to make an update of the answer of Uluk Biy and give some further information:

If you ever wonder, where some style came from, you can have a look into modena.css. You can find this css file in jfxrt.jar, which itself could be found in your JRE or JDK installation directory. On Ubuntu 14.04 the jdk home is usually under

/usr/lib/jvm/java-8-oracle/

and the jfxrt.jar should be here

/usr/lib/jvm/java-8-oracle/jre/lib/ext

Open the jar-file and have a look in the directory /com/sun/javafx/scene/control/skin/modena where you will find the modena.css

Starting from line 406 you can see a headlines like this

/* ====   BUTTON LIKE THINGS   ============================================== */

The css under this section specifies the background and border for a lot of controls and containers. You simply have to search for your target class. I will show it for buttons as an example: For the button class the following css is specified

-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0 0 -1 0, 0, 1, 2;

For some reasons they do not use borders, but use multiple backgrounds simulating a border like look. So if you want to remove the border only, you have to adjust the background and inset property.

Finally if you want to remove the focused effect you have to override this default css

.button:focused,
.toggle-button:focused,
.radio-button:focused > .radio,
.check-box:focused > .box,
.menu-button:focused,
.choice-box:focused,
.color-picker.split-button:focused > .color-picker-label,
.combo-box-base:focused,
.slider:focused .thumb {
    -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;
    -fx-background-insets: -0.2, 1, 2, -1.4, 2.6;
    -fx-background-radius: 3, 2, 1, 4, 1;
}

for the controls of you choice with the default definition for background and insets from above. E.g. for buttons:

.button:focused {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
}