How to get rid of the grey selection border in JavaFX

I'm working on a project and use JavaFX 8 for the GUI. When I click the text inside a tab of a tabpane, a thin grey box appears around the text as seen in the image below. When I click somewhere else it disappears. Does anyone know how to get rid of this box? Preferably using CSS.

Thanks in advance.

The CSS:

.tab-pane { -fx-background-insets: 0; -fx-padding: 0; } .tab-pane .headers-region { -fx-padding: 0; -fx-background-insets: 0; } .tab-header-area { -fx-padding: 0; -fx-background-insets: 0; } .tab-header-background { -fx-background-color: #9a3838; } .tab { -fx-background-color: #8b3333; -fx-padding: 5px 10px 5px 10px; -fx-background-radius: 0px; -fx-focus-color: transparent; -fx-font-size: 14px; } .tab:top { -fx-background-insets: 0; } .tab:hover { -fx-background-color: #b54343; } .tab:selected { -fx-background-color: #c24848; } .tab Label { -fx-text-fill: white; -fx-focus-color: transparent; -fx-font-weight: bold; } .tab #SearchField { -fx-background-insets: 0; }

-------------Problems Reply------------

The grey rectangle is a Region with a style class .focus-indicator, you can hide it with:

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-color: transparent;

Add this to the CSS file:

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-color: transparent;

I found it in the modena.css file. Which contains CSS specific to JavaFX-8.


Category:java Views:9 Time:2018-09-12

Related post

Copyright (C), All Rights Reserved.

processed in 0.143 (s). 11 q(s)