Mis botones no tienen la misma apariencia en safari que en chrome

Author : Jhon

Publicado : 1 abril, 2020

Si estas programando o diseñando una pagina web y los resultados que tienes no son los mismos en chrome que en safari y cuando digo safari me refiero a un iphone, ipad o mac es que te estas dejando una parte muy importante.

El problema principal es que muchas versiones de Chrome y Safari utilizan un motor de renderizado llamado Webkit. Este motor tiene algunas particularidades, sobre todo en los elementos de un formulario o en botones, que no son compartidas por navegadores como Internet Explorer o Firefox.
Muchas veces verás sombras en los campos de texto, degradados o bordes circulares que no estaban previstos. La solución está en la propiedad CSS appearance y más específicamente en la propiedad -webkit-appearance.

si por ejemplo queremos maquetar un botón con ciertas características, al final le aplicaremos la propiedad css -webkit-appearance: none

.boton-modal .boton-amarillo{
  background-color:#f39c12 !important;
  opacity: 1 !important;
  padding: 7px 7px;
  border-radius: 20px;
  -webkit-appearance: none;
}

así el botón o elemento que estemos maquetando tendrá la apariencia que deseamos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *