-1

Não consigo tirar a borda azul padrão que é mostrada no evento :focused. Estou tentando resolver esse problema pelo CSS, mas não consigo.

Meu código CSS:

.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;
}

Resultado:

preview

1
  • Tenta algo como: outline: 0; no seu css Ele vai retirar a borda azul, quando o elemento está em :focused 14/11/2016 às 19:02

1 Resposta 1

1

Como já falaram, você pode usar o outline: 0;, porém cabe ressaltar que ao retirá-lo, você reduz a acessibilidade da sua página. Soluções alternativas: estilizar o outline para ficar mais estético, ou retirá-lo, mas criar um estilo para quando o elemento estiver :focus, que pode ser o mesmo do :hover.

Vale a pena conferir esses links sobre outline e acessibilidade:

http://ux.sapo.pt/acessibilidade/web-acessibilidade/navegacao-4/#toc-no-remover-o-outline-dos-elementos-clicveis

http://www.outlinenone.com/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .