Remover borda azul do botão CSS personalizado no Chrome


811

Estou trabalhando em uma página da web e quero <button>tags com estilo personalizado . Então, com CSS, eu disse:border: none . Agora ele funciona perfeitamente no safari, mas no chrome, quando clico em um dos botões, coloca uma borda azul irritante em torno dele. Eu pensei button:active { outline: none }ou button:focus { outline:none }iria funcionar, mas também não. Alguma ideia?

É assim que é antes de ser clicado (e como eu quero que ainda pareça depois de ser clicado):

E é dessa fronteira que estou falando:

insira a descrição da imagem aqui

Aqui está o meu CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}


Não estou certo porque ele trabalha em sua demo .. Ele está fazendo isso aqui: jsfiddle.net/NgL8H @davidpauljunior
eshellborn

5
Eu adicionei a regra do foco na parte inferior que você disse que não funcionava, mas parece que: jsfiddle.net/NgL8H/1
davidpauljunior

21
Você não deve remover completamente o contorno - pessoas com deficiência - e pessoas como eu, que costumam usar o teclado porque é rápido - precisam dele para navegar. Seria muito melhor mudar o estilo do esboço para algo que você gosta.
Chris B

3
Não defina outline: nonedessa maneira, a menos que esteja pronto para substituir a perda de acessibilidade. Veja este site: outlinenone.com
Flimm

Respostas:


1536

Isso não é recomendado , pois regride a acessibilidade do seu site; para mais informações, consulte esta postagem .

Dito isto, se você insiste, este CSS deve funcionar:

button:focus {outline:0;}

Confira ou JSFiddle: http://jsfiddle.net/u4pXu/

Ou neste snippet:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}
<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>


49
Isso não deveria realmente ser outline: none;ou não importa?
henrywright

2
@henrywright Bem, o OP tentou isso e não funcionou para ele.
Diosney 13/07/2015

58
Por favor, nunca faça isso. Seu menor queixa é irrelevante para a questão da acessibilidade maciça isso se torna
phazei

20
Você definitivamente deve reformular o estilo em vez de ocultá-lo completamente. Nesse caso, tente algo como button:focus{ outline-color: #A75000 }... em vez de ocultar o indicador, você o altera para um laranja escuro que se encaixa no estilo.
cloudworks

3
A @ SeanO'Brien garantiu que a situação dada pelo OP pode ser para um site com 5 usuários, todos com capacidade física. Mas provavelmente a maioria das 1123 pessoas que aprovaram isso acham que esse é o caminho certo para fazer as coisas em uma determinada situação, mas na verdade não é discriminatório.
Alexrogers10

296

Esperar! Há uma razão para esse esboço feio!

Antes de remover esse feio contorno azul, convém levar em consideração a acessibilidade . Por padrão, esse contorno azul é colocado em elementos que podem ser focalizados. Isso é para que os usuários com problemas de acessibilidade possam focar esse botão, tabulando-o. Alguns usuários não possuem as habilidades motoras para usar o mouse e devem usar apenas o teclado (ou algum outro dispositivo de entrada) para interação com o computador. Quando você remove o contorno azul, não há mais um indicador visual sobre qual elemento está focado. Se você estiver indo para remover o contorno azul, você deve substituí-lo por um outro tipo de indicação visual de que o botão é focado.

Solução possível: Escurecer botões quando focado

Para os exemplos abaixo, o contorno azul do Chrome foi removido primeiro usando button:focus { outline:0 !important; }

Aqui estão os botões básicos do Bootstrap, como eles aparecem normalmente: Botões de inicialização no estado normal

Aqui estão os botões quando eles recebem o foco: Botões de inicialização no estado focalizado

Aqui os botões quando são pressionados: insira a descrição da imagem aqui

Como você pode ver, os botões ficam um pouco mais escuros quando recebem o foco. Pessoalmente, eu recomendaria tornar os botões focados ainda mais escuros para que haja uma diferença muito perceptível entre o estado focado e o estado normal do botão.

Não é apenas para usuários com deficiência

Tornar seu site mais acessível é algo que geralmente é esquecido, mas pode ajudar a criar uma experiência mais produtiva em seu site. Existem muitos usuários normais que usam comandos do teclado para navegar pelos sites, a fim de manter as mãos no teclado.


40
O problema é no Chrome, acontece mesmo com um clique e não apenas com guias (a implementação lógica encontrada na maioria dos navegadores). Então, na verdade Google está reduzindo a acessibilidade como a maioria dos desenvolvedores simplesmente desligar isso (no Chrome) Mais tempo perdido em pesquisar / correção de problemas relacionados ao Google / Chrome (economia de senha, suporte e-mail css, este)
RunLoop

3
Você está certo! Para ter em conta a acessibilidade ao remover o contorno, você precisa de um pouco de JavaScript: paciellogroup.com/blog/2012/04/…
mems

você não pode nem estilizar / formatar um comentário da mesma maneira que pode responder. difícil fornecer feedback nesse nível de detalhe apenas por meio de um comentário.
A-Dubb

@RunLoop Como você remove ou altera a borda azul após o clique? Isso pode ser feito via CSS ou é necessário Javascript?
24418 Nick

pessoas com essas questões pode simplesmente usar vimium-ff
yukashima huksay

60

Acabei de remover o contorno de todas as tags da página selecionando tudo e aplicando o contorno: nenhum para tudo :)

*:focus {outline:none}

Como o bagofcole mencionou, você pode precisar adicionar também! Important, assim o estilo ficará assim:

*:focus {outline:none !important}

6
Por favor não faça isso. Os usuários que navegarem na sua página com o teclado não poderão ver o elemento atualmente focado. Em vez de ocultar o contorno, desfoque o elemento se o evento click se originar de um mouse.
joepio

Basicamente, há com certeza algum outro estilo de foco ...
Arziel 20/03

46

Na minha instância deste problema, tive que especificar box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

4
Obrigado pelo seu post! A propriedade "box-shadow" foi o ponto no meu caso.
Nightking

1
Este foi o mesmo problema para mim. Não que seja relevante, mas eu estava usando o Roots 'Sage Theme no Chrome no Ubuntu 17.10.
Spencer Hill

1
Só isso funcionou depoisbox-shadow
sura2k

1
Eu tive que adicionar importante para obtê-lo para o trabalho, provavelmente inicialização tem uma definição específica para isso em algum lugar
webMan

1
isso funcionou para mim companheiro !, obrigado pela postagem da solução. Cheers
theITvideos

44

Não se esqueça da !importantdeclaração, para um melhor resultado

button:focus {outline:0 !important;}

Uma regra que possua a propriedade! Important sempre será aplicada, independentemente de onde ela apareça no documento CSS.


14
"para um melhor resultado"? Você poderia explicar o que! Importante faz?
Popnoodles

5
Mas você pode explicar o que faz? "Pela razão de existir" não explica para as pessoas que não sabem sua razão qual é a razão.
Popnoodles

48
! important deve ser usado raramente e apenas para garantir que algo não seja substituído por regras subseqüentes. Você deve direcionar seus elementos com o seletor correto ao substituir regras anteriores.
Popnoodles

24
O uso de! Important raramente é justificado. Você deve sempre escolher seus seletores de css de uma maneira que faça mais sentido e não use! Important apenas porque fornece um "resultado melhor".
Ronen Cypis

5
Por favor, não faça isso. Embora tecnicamente isso responda à pergunta do OP, suprimir todas as indicações da posição do foco outline:0 !importantsão más práticas de experiência de usuário e práticas de desenvolvimento. Se você estiver fazendo isso, verifique se está fazendo outra coisa para indicar a posição do foco (como alterar a cor de fundo do elemento).
cloudworks 10/05

26

A remoção outlineé terrível para a acessibilidade! Idealmente, o anel de foco aparece apenas quando o usuário pretende usar o teclado .

Uso : foco visível . Atualmente, é uma proposta do W3C para estilizar o foco somente do teclado usando CSS e é suportada no Firefox ( caniuse ). Até que outros navegadores principais o suportem, você pode usar esse polyfill robusto .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Também escrevi um post mais detalhado, caso você precise de mais informações.


1
Mente-lhe, AFAIK ele não precisa ser outlinecomo tal, enquanto o: foco estado é feita claramente visível através de outros meios, como border, background-color, box-shadow, etc.
Már Örlygsson

2
Melhor resposta! Sua postagem vale a pena ser lida (e agora estou vendo o resto do seu blog 😅) O pacote npm de foco visível é realmente o que está por enquanto.
FelDev 24/01/19

1
Esta é definitivamente a melhor solução. Com apenas algumas linhas de código, me livrei dessa borda azul irritante no clique, mantendo-a no uso do teclado. Obrigado!
Pest #

1
Esses dados estão corretos? Esse seletor parece suportado no Chrome, não no Firefox. developer.mozilla.org/en-US/docs/Web/CSS/...
Kevin Suttle

Parece que, no Firefox, o seletor é chamado :-moz-focusring, mas, ao contrário do que dizem os documentos, não diferencia entre o foco do clique e da guia. No Chrome, a partir de agora você precisa habilitar sinalizadores específicos para que ele funcione
phil294

12

Adicione isso ao seu arquivo CSS.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

3
obrigado. funcionou, mas a MDN diz: Esse recurso não é padrão e não está em uma faixa de padrões. Não o use em sites de produção voltados para a Web: ele não funcionará para todos os usuários. Também pode haver grandes incompatibilidades entre implementações e o comportamento pode mudar no futuro.
Behnam Mohammadi

8

Use isto:

:active {
    outline:none;
}

ou isso se isso não funcionar:

:active {
   outline:none !important;
}

Isso funciona para mim (FF e Chrome, pelo menos). Em vez de segmentar o :focusestado, basta segmentar o :activeestado e isso removerá o realce esteticamente invasivo do seu navegador quando um usuário clicar em um link. Mas ainda manterá os estados de foco quando um usuário com deficiência guia ou alterna entre guias de uma página. Ambas as partes são felizes. :)


4
Por que editar minha resposta se você só vai substituir minha versão minificada pelo mesmo código, mas estendida? Isso não esclareceu melhor para os usuários. Você recebe créditos de resposta por isso ou algo assim? LOL ...
chuk

3
o objetivo de sites StackExchange como esse é ter respostas que ajudem quem os lê a entender. Para esse propósito, uma resposta com código resumido e minificado não é tão útil quanto o código formatado de forma legível. Melhorar as respostas, tornando-as mais legíveis, é uma maneira normal de melhorar o site para todos.
Bignose

7

para este problema:

insira a descrição da imagem aqui

usa isto:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

resultado:

insira a descrição da imagem aqui


7

Para quem usa o Bootstrap e tem esse problema, ele usa: active: focus e apenas: active e: focus, para que você precise de:

element:active:focus {
    outline: 0;
}

Espero que alguém tenha economizado algum tempo para descobrir isso, bateu minha cabeça um pouco imaginando por que uma coisa tão simples não estava funcionando.


6

A maioria das soluções não funcionará se você estiver usando o Bootstrap 4.1 e possivelmente outras versões. Depois de muita batida, descobri que você precisa aplicar a classe shadow-none :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

4

Isto é o que funcionou para mim:

button:focus {
    box-shadow:none;
}

4

A correção para o Chrome e outros navegadores

button:focus { outline: none !important; box-shadow: none !important; }

3

tente este código para todos os elementos com problemas de borda azul

*{
outline: none;
}

ou

*{
outline-style: none;
}

3

Outra maneira de resolver o problema de acessibilidade que ainda não foi mencionado aqui é através de um pouco de Javascript . Os créditos vão para este blogpost interessante do hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

A abordagem aqui é realmente simples, mas eficaz: adicionar uma classe quando as pessoas começarem a usar a tecla tab para navegar na página (e, opcionalmente, removê-la quando mudar novamente para o mouse. Em seguida, você pode usar essa classe para exibir um esboço do foco ou não .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

3

Como enfrentei o mesmo problema, usei CSS-

.custom-button {
    outline: none
}

2

Se você deseja excluir o mesmo efeito na entrada, você pode adicionar o seguinte código e o botão.

input:focus {outline:0;}

2

Até que todos os navegadores modernos comecem a suportar o seletor de css : focus-visible ,
a maneira mais simples e possivelmente melhor de economizar acessibilidade é remover esse foco complicado apenas para usuários de mouse e salvá-lo para usuários de teclado :

1.Use este pequeno polyfill (cerca de 10kb): https://github.com/WICG/focus-visible
2.Adicione o próximo código em algum lugar no seu css:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Suporte para navegador do css4-selector: foco visível agora muito fraco:
https://caniuse.com/#search=focus-visible


2

Basta escrever outline:none;. Não há necessidade de usar pseudo elementofocus


1

Esse é um problema da família Chrome e está presente desde sempre.

Um erro foi gerado https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Pode ser mostrado aqui: https://codepen.io/anon/pen/Jedvwj assim que você adicionar uma borda a qualquer botão (por exemplo, role = "button" foi adicionado a uma tag, por exemplo). e define o estado do foco quando você clica com o mouse.

Eu recomendo usar esta correção: https://github.com/wicg/focus-visible .

Basta fazer o seguinte

npm install --save focus-visible

Adicione o script ao seu html:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

ou importe para o seu arquivo de entrada principal se estiver usando o webpack ou algo semelhante:

import 'focus-visible/dist/focus-visible.min';

então coloque isso no seu arquivo css:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Você pode apenas definir:

button:focus {outline:0;}

mas se você tiver um grande número de usuários, estará prejudicando aqueles que não podem usar ratos ou aqueles que apenas desejam usar o teclado para obter velocidade.


1

Eu tive o mesmo problema com o bootstrap. Eu resolvi com contorno e sombra de caixa

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.