Disattiva l'arrotondamento degli elementi di input di iPhone / Safari

374

Il mio sito Web viene visualizzato correttamente sul browser iPhone / Safari, con un'eccezione: i miei campi di immissione testo hanno uno strano stile arrotondato che non sembra affatto buono con il resto del mio sito Web.

C'è un modo per istruire Safari (tramite CSS o metadati) a non arrotondare i campi di input e renderli rettangolari come previsto?

— alex
fonte

1

Mi chiedo perché NESSUN ripristino CSS sembra contenere quella regola CSS super facile. È braindead.

— Toskan,

1

In realtà ho creato un ripristino CSS basato sul ripristino CSS 2 di Eric Meyer con l'aggiunta dei CSS necessari che trovi nella risposta qui. È disponibile su github: github.com/Jossnaz/JossiCssReset

— Toskan

1

Fai attenzione -webkit-appearance: none;, penso che sia meglio limitare questa condizione all'ambito di un elemento di input specifico. Altrimenti può nascondere gli elementi di ingresso radio se li hai nella pagina.

— Quas

659

Su iOS 5 e versioni successive, il buon vecchio border-radiusfa il trucco:

input {
    border-radius: 0;
}

Se devi solo rimuovere gli angoli arrotondati su iOS o altrimenti per qualche motivo non puoi normalizzare gli angoli arrotondati su più piattaforme, usa -webkit-border-radiusinvece la proprietà con prefisso , che è ancora supportata. Ovviamente, nota che Apple può scegliere di eliminare il supporto per la proprietà con prefisso in qualsiasi momento, ma considerando le altre possibilità di funzionalità CSS specifiche della piattaforma se lo terranno in giro.

Sulle versioni legacy dovevi -webkit-appearance: noneinvece impostare :

input {
    -webkit-appearance: none;
}

— BoltClock
fonte

1

A partire da iOS 5, questo rimuoverà solo l'ombra interna. Controlla la risposta di Piyush per rimuovere anche gli angoli arrotondati.

— Jonathan Freeland

6

-webkit-appearancein realtà non ha nulla a che fare con l'ombra interna e gli angoli arrotondati. Non usarlo solo per quello. css-infos.net/property/-webkit-appearance

— Rudie

14

"Se IOS vuole angoli arrotondati e ombre, lascia che gli utenti IOS li abbiano": È assolutamente inaccettabile nella mia situazione, e probabilmente anche nella maggior parte degli altri.

— coredumperror

2

!! non dovresti usare questo metodo, sembra che la casella di controllo non sia disponibile Per questo motivo, molti dei miei utenti del sito non procedono nel contratto di pagamento. !!

— sintesi del

10

Per <input type="search">iOS 10 avevo ancora bisogno -webkit-appearance: none;.

— Gabriel Smoljár,

55

input -webkit-appearance: none; da solo non funziona.

Prova ad aggiungere -webkit-border-radius:0px;in aggiunta.

— justadev
fonte

1

Ho dovuto aggiungere l' -webkit-border-radiusattributo a <input type="text">per rimuovere gli angoli arrotondati in iOS 5.

— Jonathan Freeland

Non è necessario aggiungere px dopo lo 0

— mintedsky,

42

È il modo migliore per rimuovere il arrotondato in IOS.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

Nota: non utilizzare questo codice per l'opzione Seleziona. Avrà problemi sulla nostra selezione.

— KoemsieLy
fonte

2

Ho scoperto che l'utilizzo input[type]sembra fare il trucco per tutti gli input.

— JacobTheDev,

11

La risposta accettata ha fatto scomparire il pulsante di opzione su Chrome. Questo funziona:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

— François Romain
fonte

7

Ecco la soluzione completa per Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

— Johansrk
fonte

14

Solo una nota, il @include border-radius(0);mixin è disponibile solo se lo hai definito tu stesso o stai usando il framework Compass, non solo SASS vaniglia.

— Waffl,

Solo una nota, se stai usando SCSS, dovresti probabilmente usare anche autoprefixer.

— Christian,

6

Per me su iOS 5.1.1 su iPhone 3GS ho dovuto cancellare lo stile di un campo di ricerca e impostarlo sullo stile previsto

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

Fare da -webkit-border-radius: 0;solo non ha cancellato lo stile nativo. Questo era anche per una visualizzazione Web su un'app nativa.

— Chris Bernardi
fonte

5

Ho avuto lo stesso problema ma solo per il pulsante di invio. Necessario per rimuovere l'ombra interna e gli angoli arrotondati -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

— seanjacob
fonte

4

Se usi normalize.css, quel foglio di stile farà qualcosa di simile input[type="search"] { -webkit-appearance: textfield; }.

Questo ha una specificità superiore rispetto a un singolo selettore di classe come .foo, quindi tieni presente che non puoi fare proprio .my-field { -webkit-appearance: none; }. Se non hai modo migliore per raggiungere la giusta specificità, questo aiuterà:

.my-field { -webkit-appearance: none !important; }

— Henrik N
fonte

4

Provi questo, per favore:

Prova ad aggiungere inputCss in questo modo:

 -webkit-appearance: none;
       border-radius: 0;

— Ivin Raj
fonte

3

Ho usato un semplice raggio-bordo: 0; per rimuovere gli angoli arrotondati per i tipi di input di testo.

— Jesse
fonte

0

Per rendere correttamente i pulsanti su Safari e altri browser, dovrai impostare uno stile specifico per i pulsanti oltre a impostare l'aspetto di webkit su nessuno, ad esempio:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

— CpnCrunch
fonte