Remova o brilho da entrada de texto / área de texto do Safari / Chrome


337

Gostaria de saber se é possível remover o brilho azul e amarelo padrão quando clico em uma área de entrada / texto usando CSS?


6
@ Steve, outro motivo para desativá-lo é se você deseja que o efeito de brilho funcione em todos os navegadores usando: focus em vez do estilo de estrutura de tópicos mal suportado.
Langdon

90
É realmente irritante quando as pessoas iniciam uma conversa filosófica sobre se algo é a "coisa certa a fazer" quando a pergunta é técnica.
tim

2
Estou fazendo uma planilha on-line, Steve, para que seja apropriado para o meu uso. Depende, mas se for apenas uma forma simples, você deve deixar o esboço como está.
precisa saber é o seguinte

4
Eu acho que é perfeitamente ok para desativá-lo e fazer um costume: efeito de foco com css ...
Ithil

Além disso, saber como desativar algo não significa que é irreversível. Qualquer pessoa que trabalhe para qualquer cliente sabe que pode querer ver algo renderizado de uma maneira e depois voltar à maneira original / padrão. Dar aulas sobre acessibilidade não mudará esse desejo nem fará ninguém feliz.
JakeGould 12/02

Respostas:


623
textarea, select, input, button { outline: none; }

Embora, tenha sido argumentado que manter o brilho / estrutura de tópicos é realmente benéfico para a acessibilidade, pois pode ajudar os usuários a ver qual elemento está atualmente focado.

Você também pode usar o pseudoelemento ': focus' para direcionar apenas as entradas quando o usuário as selecionou.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/


2
Perfeito, muito obrigado. Também me pergunto, posso remover a opção de redimensionamento da área de texto também (no canto inferior direito da área de texto)?
Alec inteligente

3
+1 por precaução; por favor, tente evitar fazer qualquer coisa que quebra a expectativa do usuário de como seus executa plataforma; você pode estar prejudicando sua produtividade e tornando seu site mais difícil de usar.
Rob

6
Remova minha opção de redimensionamento de texto do chrome / safari por sua conta e risco! Acho realmente útil, indispensável mesmo em alguns sites.
JeeBee

5
para se livrar da alça de redimensionamento: resize: none;
Daniel

22
sombra da caixa: nenhuma;
styks

92

Esse efeito também pode ocorrer em elementos que não são de entrada. Encontrei os seguintes trabalhos como uma solução mais geral

:focus {
  outline-color: transparent;
  outline-style: none;
}

Atualização: talvez você não precise usar o :focusseletor. Se você tem um elemento, digamos <div id="mydiv">stuff</div>, e estava recebendo o brilho externo desse elemento div, basta aplicar como normal:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Isso funciona, por exemplo, para <button>elementos que não se beneficiam particularmente do brilho no foco, pois na maioria das vezes você clica nele.
kasimir

11
A resposta aceita não funcionou para mim no Chrome no OSX. Esta solução fez o trabalho.
1224 Bart

Também usando essa técnica, você pode manter o foco, mas redefinir o valor do contorno para ser uma cor sólida de sua escolha, etc., de acordo com o estilo do site, se removê-lo completamente não for completamente satisfatório.
Neil Monroe

11
Não funcionou para mim na versão mais recente do chrome45.0.2454.101 m
J86 04/04

Esta resposta do @ Carl-W não deve ser esquecida! - Isso foi útil ao usar o jQuery para vincular a uma âncora que era uma div. Eu estava recarregando um iframe na div e depois manualmente indo para a âncora sem recarregar. Isso rolaria a página para a âncora, mas toda a div tinha um brilho externo azul. Adicionado este CSS no elemento div, e funcionou! - NOTA: Eu não uso :focuspara o seletor, eu só colocar o outline-colore outline-styleno css da minha div.
Wade

13

No redimensionamento da área de texto em navegadores baseados em webkit:

Definir altura e largura máx. Na área de texto não removerá a alça de redimensionamento visual. Tentar:

resize: none;

(e sim, eu concordo com "tente evitar fazer algo que não atenda às expectativas do usuário", mas às vezes faz sentido, ou seja, no contexto de um aplicativo da web)

Para personalizar a aparência dos elementos do formulário do webkit do zero:

-webkit-appearance: none;

3
Também é possível permitir redimensionar em apenas uma direção, que pode fixar a sua interação com alguns layouts sem desativá-lo completamente: os valores possíveis para redimensionamento são none, both, horizontal, vertical, e inherit.
Boann

Gosto da solução oferecida aqui com '-webkit-aparecimento: nenhum;' - remove TODO o estilo dos elementos de entrada, para que você possa estilizá-los conforme necessário. Obrigado!
hanazair

Eu não sei por que isso tem tantos votos positivos, não é uma resposta para a pergunta.
paddotk 14/09

7

Carl W :

Esse efeito também pode ocorrer em elementos que não são de entrada. Encontrei os seguintes trabalhos como uma solução mais geral

:focus {
  outline-color: transparent;
  outline-style: none;
}

Eu vou explicar isso:

  • :focussignifica que estiliza os elementos que estão em foco. Então, estamos estilizando os elementos em foco.
  • outline-color: transparent; significa que o brilho azul é transparente.
  • outline-style: none; faz a mesma coisa.

5

Eu experimentei isso em um divevento com um clique e, após 20 pesquisas, encontrei esse trecho que salvou meu dia.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Isso desativa o destaque do botão padrão nos navegadores móveis da webkit


4

Esta é a solução para pessoas que se preocupam com a acessibilidade .

Por favor, não use outline:none;para desativar o esboço do foco. Você está matando a acessibilidade da web se fizer isso. Existe uma maneira acessível de fazer isso.

Confira este artigo que escrevi para explicar como remover a borda de uma maneira acessível.

A idéia, em suma, é mostrar apenas a borda do contorno quando detectamos um usuário do teclado. Quando um usuário começa a usar o mouse, desativamos o contorno. Como resultado, você obtém o melhor dos dois.


2

Se você deseja remover o brilho dos botões no Bootstrap (o que não é necessariamente um mau UX na minha opinião), você precisará do seguinte código:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

Obrigado. .btn:active:focusfoi necessário remover o brilho enquanto pressionava o botão.
usar o seguinte código

2

Esta solução funcionou para mim.

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

1

algumas vezes acontece que os botões também usam abaixo para remover a linha externa

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

0
<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

0

Achei útil remover o contorno de um botão de entrada do tipo "porta deslizante", porque o contorno não cobre a "tampa" correta da imagem da porta deslizante, tornando o estado do foco um pouco instável.

input.slidingdoorbutton:focus { outline: none;}

0

Eu só precisava remover esse efeito dos meus campos de entrada de texto e não consegui que as outras técnicas funcionassem corretamente, mas é isso que funciona para mim;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Testado no Firefox e no Chrome.


0

Certo! Você pode remover a borda azul também de todos os elementos HTML usando *

*{
    outline-color: transparent;
    outline-style: none;
  }

E

 *{
     outline: 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.