HTML (HTML5;CSS3) Como tirar a borda azul da INPUT?

[Mizrain Phelipe Sá]

Pessoal como faço para tirar a borda azul padrão da input quando você clica nela? 

 

 

Obs: Estou usando um form do Bootstrap, aqui o código html dele:

<form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Pesquisar" aria-label="Pesquisar">
    <button class="btn my-2 my-sm-0" type="submit"><span class="pesquisar">Pesquisar</span></button>
</form>

Se alguém souber como tirar essa borda de focus eu gradeceria muito.

[brund321]

@@Mizrain Phelipe Sá Seleciona o elemento com css e adiciona a propriedade outline com o valor none. Por exemplo:

.form-control {

  outline: none;

}

 

[Mizrain Phelipe Sá]

@brund321 Obrigado, mas só consegui resolver assim:

 

.form-control:focus{ 
  border-color: inherit; 
  -webkit-box-shadow: none; 
  box-shadow: none; 
}

 

[brund321]

@Mizrain Phelipe Sá Oh,eu não sabia que o bootstrap utiliza uma box-shadow quando o elemento está em foco, mas já fica uma dica: se você algum dia enfrentar o mesmo problema sem o uso de nenhum framework e quiser remover essa "borda" que aparece no elemento(que é o padrão de alguns navegadores) é só utilizar o outline: none;