IOS devices issues with HTML form input (type = text)

Question

So I have an HTML login form with two fields: Email and Password. These can be filled easily on any device's browser other than IOS devices(iPhone,iPad). On IOS fields can hardly be in focus and once in focus,the keyboard pops up, I start typing but nothing is actually being filled. I have tried in both Chrome and safari and still get the same result. Field remains blank. Below is how my form is formatted:

<form method="post" name="login" action="login">
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="email"></label>
      <input type="text" name="email" placeholder="Enter your email address" class="formInput"/>
   </div>
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="password"></label>
      <input type="password" name="password" class="formInput"/>
    </div>
    <button class="blue centeredContent">Login</button>
</form>

I tried adding an autofocus attribute, preset a value and still the same.

Does your formInput class have any odd styles in it? like setting the color and the background-color to the same value? e.g. There isn't anything technically wrong in the code sample... so it should work. — scunliffe
I don't think we can't insert text into a textbox in ios devises. Guys at apple are not that stupid. There are many projects having forms where people can enter text in ios devices. It's obvious that the issue is something specific to your project. such as js, css etc which you haven't provided. — T J
Side note: your <label> tags are not going to be effective as the for attribute will only match on an id attribute on the form elements they are associated with. (and you don't have any ids specified) — scunliffe
@scunliffe thanks for the hint about label. I used to think it was link via the name attribute. However the problem was not related to any JS file but a styling issue as u suggested. it was all because of some stylesheet reset I used. I will post the answer bellow. Thanks alot for your help — webicy

webicy webicy · Accepted Answer · 2014-09-02T08:59:02

Found the issue, it's a stylesheet reset I found online to help with touch devices behaviour for when the user touch/ hold an element and I copied it across most of my projects. So if you have this issue, it's most likely you have these lines in your css:

  *, *:before, *:after {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
     }

So just remove it or set it to default. And if your intention is to stop people from selecting stuff on your website, then make sure you reset this style property to default on inputs

  input, input:before, input:after {
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -ms-user-select: initial;
      user-select: initial;
     }

IOS devices issues with HTML form input (type = text)

4 Answers