灰线出现在我在iPhone上的输入字段中

Question

I have an input that has a weird gray line, but only on iPhone. It is a solid white input on non-mobile browsers. I do not have android so I am not able to test if it is iPhone only. Any solutions to make the input entirely white?

HTML:

<input class="bt-email" type="email" name="email" placeholder="enter email address">
<input class="bt-submit" type="submit" value="let's get moving!">

CSS:

.bt-email {
   color: #1795db;
   display: inline-block;
   margin: 0 auto;
   height: 30px;
   font-family: 'Lato', serif;
   font-weight: 300;
   padding-left: 15px;
   text-decoration: none solid rgb(56, 64, 71);
   width: 90%;
   background: #ffffff;
   border: 4px solid #ffffff;
   border-radius: 5px 5px 5px 5px;
}
.bt-email:focus {
   outline: #ffffff;
}
.bt-submit {
   color: #ffffff;
   display: inline-block;
   margin: 0 auto;
   height: 40px;
   font-family: 'Lato', serif;
   font-weight: 300;
   text-decoration: none solid rgb(56, 64, 71);
   width: 90%;
   padding-top: 4px;
   background: #fb7f2d;
   border: 1px solid #fb7f2d;
   border-radius: 5px 5px 5px 5px;
 }

Answer 1

I have actually stumbled upon the answer I was looking for. It appears mobile Safari adds an inner-text shadow to inputs. This code solved it:

CSS:

-webkit-appearance: none;

Related question that solved my issue

Answer 2

Try removing the 4px border and just add

 padding:4px;

Instead by adding it to the existing padding

Answer 3

Yes, Pretty simple.

Just try

input {-webkit-appearance: none;}