Rimuovi textarea inner shadow su Mobile Safari (iPhone)

152

Per impostazione predefinita, sembra Mobile Safari aggiunge l'ombra interna superiore a tutti i campi di input, compresa textarea. C'è un modo per rimuoverlo?

È particolarmente brutto quando hai uno sfondo bianco.

iphone mobile mobile-safari

— Lione
fonte

340

Aggiungendo questo stile CSS:

-webkit-appearance: none;

— Lione
fonte

26

fai attenzione quando aggiungi questa proprietà alla casella di controllo del tipo di input e ai selettori dei pulsanti di opzione, perché nasconde le caselle di controllo e i pulsanti di opzione;)

— Zain Shaikh

14

Grazie per la risposta Lione. A proposito, il modo migliore per usarlo è applicarlo solo a textarea, input[type="text"], input[type="submit"].

— jgthms,

8

Non dimenticare input[type="password"]anche tu .

— Nick Pyett,

7

Non dimenticare [type="email"]anche!

— Willster,

35

Potrebbe essere più semplice usare l'operatore not a seconda dei tipi di input che stai utilizzando:input:not([type=checkbox]):not([type=radio])

— Justin Fisher

30

Durante l'aggiunta dello stile CSS

-webkit-appearance: none;

funzionerà, si sbarazzerà di tutto. In alternativa, potresti provare questo:

box-shadow: none !important;

In questo modo mantieni la freccia giù.

— Justin Tolchin
fonte

6

L'aggiunta della proprietà box-shadow non funziona. L'ombra interna appare ancora in Safari su iOS.

— silentmouth,

22

Ecco la soluzione semplice

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

— IqbalBary
fonte

9

A volte puoi avere un foglio di stile lì rotto, appearance: none;quindi un modo per risolverlo quando succede è usare caret. Il modo migliore sarà quello di riscrivere il tuo codice e scoprire per cosa fa parte del tuo codice rovinare lo stilenone

Prima di utilizzare caretè necessario sapere che può causare problemi con altri stili

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

NOTA: utilizzare none, caretnon è ottimale.

— TheCrazyProfessor
fonte

3

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

e ho trovato un vecchio commento con le stesse risposte qui.

https://stackoverflow.com/a/29750016/9287284

— KABA
fonte

-31

Anche l'impostazione delle proprietà css backgrounde borderdel inputtag sembra funzionare.

Prova questo:

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>

— MTS
fonte

9

Errato e fuorviante. Si prega di testare il codice sul dispositivo giusto prima di pubblicare ...

— Ariel

Risposta davvero sbagliata, nulla al riguardo è ciò di cui l'OP chiede

— Jacta,