How to remove inner shadow from button or input

Question

When clicking on the button appears a gray shadow at the top, creating an effect kind of 3d, however I want to remove it. How I want it to look when I click:

How are you:

My 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>

My CSS so far:

.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;
}

If you look closely you will notice that the input tbm has this inner shadow on the weaker top and only as a placeholder and the button does not have to be when you click. I also want to remove this edge from the left by clicking. How do I?

Answer 1

The css property that puts shadows on objects is box shadow. To remove the shadow just put

box-shadow: none;