Le forze iOS arrotondano gli angoli e il bagliore sugli ingressi

Question

I dispositivi iOS aggiungono molti stili fastidiosi agli input dei moduli, in particolare sull'input [type = submit]. Di seguito sono mostrati lo stesso semplice modulo di ricerca su un browser desktop e su un iPad.

Desktop:

iPad:

L'input [type = text] utilizza un inserto scatola CSS ombra e ho anche specificato -webkit-border-radius: nessuna; che apparentemente viene ignorato. Il colore e la forma del mio pulsante [type = submit] di input sono completamente imbastiti sull'iPad. Qualcuno sa cosa posso fare per risolvere questo problema? Grazie in anticipo.

Answer 1

La versione che avevo di lavoro è:

input { 
    -webkit-appearance: none; 
} 

In alcune versioni del browser WebKit, si può anche essere di fronte alla border-radius essendo ancora al suo posto. Resettare con il seguente:

input { 
    -webkit-border-radius:0; 
    border-radius:0; 
} 

Questo può essere estesa ai tutti webkit nello stile di form componenti quali input, select, button o textarea.

In riferimento alla domanda originale, non si utilizzerà il valore 'none' quando si cancella un elemento css basato su unità. Ricorda anche che questo nasconde le caselle di controllo in Chrome, quindi forse usa qualcosa come input[type=text] o input:not([type=checkbox]), input:not([type=radio]).

Answer 2

uno sguardo al normalize.css

C'è una demo in cui è possibile testare gli elementi del modulo e vedere come si presentano in ios. Ci sono più proprietà orientate al webkit.

Answer 3

Per il pulsante di invio non utilizzare:

<input type="submit" class="yourstylehere" value="submit" /> 

Utilizzare invece la modifica del tasto:

<button type="submit" class="yourstylehere">Submit</button> 

Questo ha funzionato per me.

Answer 4

È possibile liberarsi di un po 'di webkits forma, di ingresso, ecc styling con questo:

input, textarea, select { 
    -webkit-appearance: none; 
} 

Answer 5

Questo è il quello che uso nei miei progetti

* { 
    -webkit-tap-highlight-color: transparent; 
} 
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span { 
    -moz-user-select: none; 
    -webkit-user-select: none; 
} 
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}