Estilo de los botones de introducción para el iPad y el iPhone

Estoy usando CSS para el estilo de los botones de entrada en mi sitio web, pero en los dispositivos IOS el estilo es reemplazado por Mac por defecto de los botones. Hay una forma de botones de estilo de iOS, o de una manera tal vez hacer un hipervínculo que se comporta como un botón de enviar?

InformationsquelleAutor mheavers | 2011-03-27

6 Kommentare

  1. 513

    Usted puede estar buscando

    -webkit-appearance: none;
    • Todavía hay una diferencia en el botón presione/:activo estilo, ¿verdad? Ignora sus estilos y se aplica un gris semitransparente de superposición?
    • Si usted está usando SECS, uso @include experimental(appearance, none);
    • El enlace de arriba, ahora está muerto, por desgracia (thinkvitamin.com/design/…).
    • Un problema con esto es que para <select> cajas, que no muestra la flecha cuando en un navegador de Escritorio. Esta es la mejor emparejado con una consulta de medios de comunicación, creo.
    • ¿Qué… Fue realmente así de simple? He utilizado una gran cantidad de CSS líneas de estilo de ella y esta línea no es suficiente para hacer el truco?!
    • No me funciona, en IPAD1… botón de enviar todavía se redondea… no respetar las reglas css…
    • Has probado a añadir border-radius: 0 demasiado?
    • Te amo. Este trabajó como un encanto. Yo estaba tirando de mi pelo!
    • Puede me permite escupir en este comportamiento de Safari y cualquier navegador después de este?! Realmente es una PitA para hacer estas cosas.. me refiero a aceptar que quieren agregar sus propias normas, pero es tan molesto que tiene que hacer el pequeño extra de pastel para cada navegador. Es 2016, y todavía tengo que utilizar proveedor de prefijos y soluciones como la que. La odio. Tengo que usarlo en el nuevo navegador Safari ahora.. realmente.. puro odio! +1 para su solución.

  2. 9

    Recientemente me encontré con este problema yo mismo.

    <!--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.

    • Que todavía no me permiten cambiar la altura de un botón. Lo gracioso a pesar de que, tan pronto como le doy al botón personalizado ancho de la altura personalizada, también es tomado en cuenta.
    • Esta fue la solución para UIkit v3.
  3. 1

    Utilizar el siguiente css

    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;
    }

    HTML:

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

  4. 0

    Tuve el mismo problema hoy en día utilizando primefaces (primeng) y angular 7.
    Agregue lo siguiente a su estilo.css

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

    también estoy con un poco de bootstrap que se ha de reiniciar el sistema.css, que la reemplaza con (por eso he tenido que añadir !importante)

    button {
      -webkit-appearance: button;

    }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein