Botones de entrada de estilo para iPad y iPhone

214

Estoy usando CSS para diseñar los botones de entrada en mi sitio web, pero en los dispositivos IOS el estilo se reemplaza por los botones predeterminados de Mac. ¿Hay alguna forma de diseñar botones para iOS o una forma de hacer un hipervínculo que se comporte como un botón de envío?

— mheavers
fuente

524

Usted puede estar buscando

-webkit-appearance: none;

Notas CSS de Safari en -webkit-appearance
Red de desarrolladores de Mozilla -moz-appearance

— Jonas G. Drange
fuente

Todavía hay una diferencia en presionar el botón /: estilo activo, ¿verdad? ¿Ignora tus estilos y aplica una superposición gris semitransparente?

— Alan H.

66

Si usa SCSS, use@include experimental(appearance, none);

— Sam Soffes

1

El enlace de arriba ahora está muerto, desafortunadamente ( thinkvitamin.com/design/… ).

— Por Quested Aronsson

Un problema con esto es que para los <select>cuadros, no muestra la flecha cuando está en un navegador de escritorio. Por lo tanto, creo que esto se combina mejor con una consulta de medios.

— andrewtweber

¿Qué ... fue realmente así de simple? ¿Usé muchas CSSlíneas para darle estilo y esta línea fue suficiente para hacer el truco?

19

Por favor agregue este código CSS

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

— subindas pm
fuente

9

Recientemente me encontré con este problema.

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

Espero que ayude.

— Gorila robot digital
fuente

3

Eso todavía no me permite cambiar la altura de un botón. Sin embargo, lo curioso es que tan pronto como le doy al botón un ancho personalizado, también se tiene en cuenta la altura personalizada.

— gripe

Esta fue la solución para UIkit v3.

— Kalob Taulien

4

Usa el siguiente CSS

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!" />

Expandir fragmento

— vinod
fuente

0

-webkit-apariencia: ninguno;

Nota: use bootstrap para diseñar un botón. Es común que responda.

— Karthiha Karthi
fuente

0

Tuve el mismo problema hoy usando primefaces (primeng) y angular 7. Agregue lo siguiente a su style.css

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

También estoy usando un poco de bootstrap que tiene un reinicio.css, que lo anula (¡por eso tuve que agregar! importante)

button {
  -webkit-appearance: button;

}

— djnose
fuente