Gostaria de saber se é possível remover o brilho azul e amarelo padrão quando clico em uma área de entrada / texto usando CSS?
Gostaria de saber se é possível remover o brilho azul e amarelo padrão quando clico em uma área de entrada / texto usando CSS?
Respostas:
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.
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 :focus
seletor. 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;
}
<button>
elementos que não se beneficiam particularmente do brilho no foco, pois na maioria das vezes você clica nele.
45.0.2454.101 m
:focus
para o seletor, eu só colocar o outline-color
e outline-style
no css da minha div.
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;
none
, both
, horizontal
, vertical
, e inherit
.
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:
:focus
significa 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.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.
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;
}
.btn:active:focus
foi necessário remover o brilho enquanto pressionava o botão.
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;
}
<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>
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;}
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.
Certo! Você pode remover a borda azul também de todos os elementos HTML usando *
*{
outline-color: transparent;
outline-style: none;
}
E
*{
outline: none;
}