1

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?

Input Grey Line Image

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;
 }
Ryan Salmons
  • 1,429
  • 10
  • 21
  • 42
  • Only on iPhone? Have you tried Android or any other browser? Have you resized your browser and see if you can replicate it? Maybe use the emulator in the dev tools on chrome and try to replicate it with various devices – Idris Apr 20 '14 at 00:34
  • It actually does not show the grey line in the Chrome Emulator for any device. However, it does show up on the actual iPhone. I have had a few buddies confirm this. – Ryan Salmons Apr 20 '14 at 00:39

3 Answers3

2

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

Community
  • 1
  • 1
Ryan Salmons
  • 1,429
  • 10
  • 21
  • 42
0

Try removing the 4px border and just add 

 padding:4px;

Instead by adding it to the existing padding

tylerlindell
  • 1,545
  • 2
  • 17
  • 20
0

Yes, Pretty simple.

Just try 

input {-webkit-appearance: none;}
Muddasir23
  • 582
  • 6
  • 15