How to remove the blue border of the tabpane?

Question

How to remove the blue border of the tabpane?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I can not get the default blue border that is shown in the :focused event. I'm trying to solve this problem by CSS, but I can not.

My CSS code:

.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color: #333333;
}

.tab-pane {
    -fx-tab-min-width:90px;
}

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
    -fx-padding: 10 20;
}

.tab-pane .tab{
    -fx-background-color: #333333;
}

.tab-pane .tab:selected
{
    -fx-background-color: #FAFAFA;
}

.tab .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #CCCCCC;
    -fx-font-size: 13px;
    -fx-font-weight: bold;
}

.tab:selected .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #555555;
}

Result:

java css javafx

asked by anonymous 14.11.2016 / 15:08

2 answers

How do I send a field only by ajax? [duplicate] Copies a column from a given table to another column of another table

score 0 · Answer 1

0

Try something like: outline: 0; in your css It will remove the blue border, when the element is in: focused

14.11.2016 / 20:02

score 0 · Answer 2

As already mentioned, you can use outline: 0; , but it's worth noting that removing it reduces the accessibility of your page. Workarounds: stylize the outline to be more aesthetic, or take it out, but create a style for when the element is : focus , which can be the same as hover .

It pays to check outline and accessibility links:

link