Rimuovi l'ombra dell'input iOS

Su iOS (Safari 5) devo seguire l'elemento di input (ombra interna in alto):

Voglio rimuovere l'ombra superiore, il bug -webkit-appearancenon salva.

Lo stile attuale è:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Dovrai usare -webkit-appearance: none;per sovrascrivere gli stili IOS predefiniti. Tuttavia, selezionando solo il inputtag in CSS non sovrascriverà gli stili IOS predefiniti, perché IOS aggiunge i suoi stili utilizzando un selettore di attributi input[type=text]. Pertanto il tuo CSS dovrà utilizzare un selettore di attributi per sostituire gli stili CSS IOS predefiniti che sono stati preimpostati.

Prova questo:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Collegamenti utili:

Puoi saperne di più appearancequi:

http://css-tricks.com/almanac/properties/a/appearance/

Se desideri saperne di più sui selettori di attributi CSS, puoi trovare un articolo molto informativo qui:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

Sembra rimuovere anche le ombre.

Come menzionato da @davidpauljunior ; fare attenzione all'impostazione -webkit-appearancesu un selettore di ingresso generale.

webkit rimuoverà tutte le proprietà

-webkit-appearance: none;

Prova a utilizzare la proprietà box-shadow per rimuovere l'ombra sull'elemento di input

box-shadow: none !important;

Ho cercato di trovare una soluzione che a.) Funziona e b.) Sono in grado di capire perché funziona .

So che l'ombra per gli input (e il bordo arrotondato per l'input [type = "search"]) proviene da un'immagine di sfondo.

Quindi, ovviamente, l'impostazione è background-image: nonestata il mio primo tentativo, ma non sembra funzionare.

L'impostazione background-image: url()funziona, ma sono ancora preoccupato di avere un vuoto url(). Anche se attualmente è solo una brutta sensazione.

background-clip: padding-box; sembra che faccia anche il lavoro, ma anche dopo aver letto i documenti "background-clip" non capisco perché questo rimuove completamente lo sfondo.

La mia soluzione preferita:

background-image: linear-gradient(transparent, transparent);

Questo è un CSS valido e capisco come funziona.

Sebbene la risposta accettata sia un buon inizio, come altri hanno sottolineato, funziona solo per gli input di cui typeè "text". Ci sono una miriade di altri tipi di input che vengono visualizzati anche come caselle di testo su iOS, quindi dobbiamo espandere questa regola per tenere conto di questi altri tipi.

Ecco il CSS che sto usando per eliminare i campi di testo di input e le aree di testo dall'ombra interna, preservando lo stile predefinito per pulsanti, caselle di controllo, cursori di intervallo, menu a discesa di data / ora e pulsanti di opzione, tutti creati utilizzando anche il <input>tag umile .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Questo funziona meglio per me. Inoltre significa che non devo applicarlo a ogni diverso tipo di input (ad esempio testo, telefono, e-mail, ecc.).

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}