// As Appearences Enganam

:: Às vezes navegadores Webkit são inconvenientes com certas propriedades. No meu trabalho, criar interfaces responsivas, não é incomum que estilos aplicados a determinados objetos não tenham efeito no Safari dentro do iPad. E este é o caso da propriedade border-radius no input[type="button"].

Botões com border-radius impostos pelo navegador.

Felizmente, podemos contornar isso utilizando a propriedade appearance:

.objeto {
 -webkit-appearance: valor; /*Safari/Chrome*/
 -moz-appearance: valor; /*Firefox*/
 -ms-appearance: valor; /*IE*/
 -o-appearance: valor; /*Opera*/
 appearance: valor;
}

Oficialmente, ela instrui o objeto a adquirir um formato diferente do que ele normalmente tem e seus valores possíveis são: normal, icon, window, button, menu e field. O truque para nós está em embutir valor none pra ele. Desse modo, um input[type="button"] pode ser, digamos, dissuadido de usar a formatação padrão no Safari e obedecer aos seus próprios comandos.
No caso, os botões de e-commerce voltaram a ter o formato escolhido. Veja:

Show your support

Clapping shows how much you appreciated MB Santiago jηr’s story.