Ao clicar no botão aparece uma sombra cinza na parte superior, criando um efeito meio que 3d, porém eu quero remove-lo. Como eu quero que fique ao clicar:
Como está:
Meu HTML:
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-8">
<div class="buscador">
<form role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Procurar">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Meu CSS até o momento:
.buscador button{
background: #ffffff;
border-left: none;
border-color: #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.buscador button:hover,
.buscador button:focus{
background-color: #ffffff !important;
border-color: #ccc !important;
outline: 0 !important;
}
Se vocês observarem bem vão reparar que o input tbm tem essa sombra interior no topo mais fraca e somente como placeholder e no button não tem a não ser quando clica. Também quero remover essa borda da esquerda ao clicar. Como faço?