3

Tengo un botón pero en iOS Safari se ve diferente. He probado con este codigo -webkit-appearance: none; y no me funciona.

Éste es el CSS del botón (también en JSFiddle):

button {
  padding: 5px 20px;
  overflow: hidden;
  background-color: #3fc2f0;
  /*background-image: linear-gradient(#3fc2f0, #3fc2f0);*/
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-shadow: 0 2px 5px #19748f;
  -moz-box-shadow: 0 2px 5px #19748f;
  box-shadow: 0 2px 5px #19748f;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  position: relative;
}
<button>Comprar</button>

Que se ve así en diferentes navegadores (el tamaño es igual, el problema es el borde diferente):

Incluso con el mismo css se ven diferentes en el mismo ipad

Incluso con el mismo CSS se ven diferentes en el mismo iPad. ¿Por qué ocurre eso y cómo puedo solucionarlo?

1
  • Quizás te sirva usar border: none Commented el 1 dic. 2019 a las 8:13

2 respuestas 2

1

Creo que esto te puede servir:

 button{
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

En caso de que no te funcionara, y a pesar de no ser una buena práctica, puedes añadirle (!important), quedando así:

button{
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }

Espero que te sirva ;)

1

En tu CSS no estás definiendo la propiedad border entonces el navegador se encarga de poner el estilo de bordes por default.

Estoy casi seguro (debido a que no tengo safari) que si añades border: 1px solid #CCC; a tu CSS solo como prueba, los bordes se verán iguales.

button {
    padding: 5px 20px;
    overflow: hidden;
    background-color: #3fc2f0;
   /*background-image: linear-gradient(#3fc2f0, #3fc2f0);*/
   -webkit-border-radius: 24px;
   -moz-border-radius: 24px;
   border-radius: 24px;
   -webkit-box-shadow: 0 2px 5px #19748f;
   -moz-box-shadow: 0 2px 5px #19748f;
   box-shadow: 0 2px 5px #19748f;
   font-family: Arial;
   color: #ffffff;
   font-size: 16px;
   position: relative;

    border: 1px solid #CCC;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.