Skip to main content
Adicionei o HTML
Fonte Link
Leo Lima
  • 123
  • 1
  • 11

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:

inserir a descrição da imagem aqui

Como está:

inserir a descrição da imagem aqui

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?

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:

inserir a descrição da imagem aqui

Como está:

inserir a descrição da imagem aqui

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?

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:

inserir a descrição da imagem aqui

Como está:

inserir a descrição da imagem aqui

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?

Fonte Link
Leo Lima
  • 123
  • 1
  • 11

Como remover sombra interior do button ou input

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:

inserir a descrição da imagem aqui

Como está:

inserir a descrição da imagem aqui

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?