Designazione dei pulsanti di input per iPad e iPhone

215

Sto usando CSS per dare uno stile ai pulsanti di input sul mio sito Web, ma sui dispositivi IOS lo stile è sostituito dai pulsanti predefiniti di Mac. C'è un modo per personalizzare i pulsanti per iOS o un modo per creare un collegamento ipertestuale che si comporti come un pulsante di invio?

— mheavers
fonte

524

Forse stai cercando

-webkit-appearance: none;

Note CSS Safari su -webkit-appearance
Mozilla Developer Network's -moz-appearance

— Jonas G. Drange
fonte

C'è ancora una differenza nella pressione dei pulsanti /: stile attivo, giusto? Ignora i tuoi stili e applica una sovrapposizione grigia semitrasparente?

— Alan H.

6

Se stai usando SCSS, usa@include experimental(appearance, none);

— Sam Soffes il

1

Il link sopra è ora morto, purtroppo ( thinkvitamin.com/design/… ).

— Per Quested Aronsson,

Un problema con questo è che per le <select>caselle, non visualizza la freccia quando si trova su un browser desktop. Quindi questo è meglio abbinato a una query multimediale penso.

— Andrewtweber,

Cosa ... Era davvero così semplice? Ho usato molte CSSlinee per modellarla e questa linea è stata sufficiente per fare il trucco ?!

19

Aggiungi questo codice CSS

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

— subindas pm
fonte

9

Di recente ho riscontrato questo problema da solo.

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

Spero che aiuti.

— Gorilla robot digitale
fonte

3

Ciò non mi consente ancora di modificare l'altezza di un pulsante. La cosa divertente però, non appena dò al pulsante una larghezza personalizzata viene presa in considerazione anche l'altezza personalizzata.

— influenza

Questa è stata la correzione per UIkit v3.

— Kalob Taulien,

4

Usa il css qui sotto

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}

<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />

Espandi frammento

— vinod
fonte

0

-webkit-aspetto: nessuno;

Nota: usa bootstrap per dare uno stile a un pulsante. È comune per reattivo.

— Karthiha Karthi
fonte

0

Ho avuto lo stesso problema oggi usando primefaces (primeng) e angular 7. Aggiungi il seguente al tuo style.css

p-button {
   -webkit-appearance: none !important;
}

sto anche usando un po 'di bootstrap che ha un reboot.css, che lo sostituisce con (ecco perché ho dovuto aggiungere! importante)

button {
  -webkit-appearance: button;

}

— djnose
fonte