14

Olhem só a imagem para ter uma idéia:

textarea

Quando clicado essa borda com shadow azul fica visível. Acho que é padrão de todos os browser.

Alguma solução?

1
  • Talvez você queira colocar mais detalhes como o fato de estar usando o Bootstrap. A sua pergunta parecia um pouco mais geral, mas agora parece ter um contexto específico (tem a ver com um framework específico). 11/02/2014 às 14:06

6 Respostas 6

31

Isso não é padrão de todos os browser, isso eu posso te garantir.

Se isso está acontecendo em todos os browsers, existe a possibilidade de você está usando bootstrap ou alguma outra biblioteca que tenha embutido

Caso sim manipule esse css para deixar da forma que lhe agrada

textarea:focus, input:focus, select:focus {
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
} 

Este é um exemplo de css que removeria tanto as bordas quanto o efeito de sobra em azul

5
  • 1
    Nossa, acabei de ver que era o bootstrap que estava fazendo isso. Obrigado ai @ErlonCharles 11/02/2014 às 13:48
  • Se quiser pode marcar a resposta como correta eu agradeço hehe :D 11/02/2014 às 21:13
  • 1
    kkkkk, esqueci @ErlonCharles. Ja esta como correta agora! 11/02/2014 às 21:38
  • Adicionado ao meu reset.css pessoal! Obrigado!
    – Zkk
    23/05/2016 às 18:40
  • perfeito, procurei demais!! 26/07/2018 às 19:58
4

A borda é usada para mostrar que um elemento está em foco (quando você digita algo ou aperta o botão enter).

Você pode removê-la assim:

textarea:focus, input:focus, select:focus {
    outline: 0;
}

É bom lembrar que com essa mesma regra você também pode personalizar esse comportamento (ao invés de simplesmente removê-lo).

Isso, inclusive, é aconselhável, uma vez que por questões de usabilidade é preferível que o usuário tenha sempre uma maneira de saber qual elemento tem o foco atualmente.

Resposta adaptada deste link.

3

Utilize o atributo outline do CSS, como no exemplo:

input, textarea, select {
    outline: 0;
}

Veja o jsfiddle.

2

Acredito que você esteja usando ASP.NET MVC 5 que utiliza Twitter Bootstrap, então você poderia adicionar esse CSS no seu arquivo Site.css

.form-control:focus {
  border-color: #cccccc;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
0

Você pode definir uma classe ou id para o componente, por exemplo:

<input class="form-itens">

E depois configurar no arquivo CSS:

.form-itens:focus {
   box-shadow:none;
}

Isso irá resolver.

-3

Bom hj em dia só o

input
{
  outline: 0;
}

ja resolve

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 .