Problemi relativi ai dispositivi IOS con l'input del modulo HTML (tipo = testo)

Question

Quindi ho un modulo di accesso HTML con due campi: Email e Password. Questi possono essere riempiti facilmente sul browser di qualsiasi dispositivo diversi dai dispositivi IOS (iPhone, iPad). Sui campi IOS difficilmente può essere messo a fuoco e una volta messo a fuoco, la tastiera si apre, inizio a digitare ma non viene effettivamente riempito nulla. Ho provato sia in Chrome che in Safari e ottengo lo stesso risultato. Il campo rimane nero. Bellow è come la mia forma è formattata:

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

Ho provato ad aggiungere un attributo autofocus, preselezionare un valore e sempre lo stesso.

Answer 1

Trovato il problema, è un reset del foglio di stile che ho trovato online per aiutare con il comportamento dei dispositivi touch per quando l'utente tocca/tiene premuto un elemento e l'ho copiato su gran parte dei miei progetti. Quindi, se avete questo problema, è molto probabile che si dispone di queste linee nel CSS:

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

Quindi basta rimuoverlo o impostarlo di default. E se la vostra intenzione è quella di impedire alla gente di selezione roba sul tuo sito web, quindi assicurarsi di reimpostare questa struttura in stile di default sul ingressi

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