CSS enviar botão renderização estranha no iPad / iPhone

222

Percebi que se eu estilizar meus botões com CSS usando raio, cores e bordas, eles ficarão bem, mas no iphone / ipad / ipod parecerão terríveis ... não deve ser a mesma renderização do Safari Desktop ??

insira a descrição da imagem aqui

iphone css ipad mobile-safari mobile-webkit Francesco
fonte

possível duplicata de estilo CSS para os botões de entrada no ipad / iphone

skolima

Respostas:

453

oops! acabei de me encontrar: basta adicionar esta linha a qualquer elemento que você precisar

   -webkit-appearance: none;

Francesco
fonte

eu te amo, stackoverflow, e @Francesco

jahrichie

Brilhante, e aqui está um ótimo artigo sobre isso nos truques de CSS. Ele lista todos os outros elementos alterados pelo WebKit e Mozilla.

Patrick

Compass tem um mixin para isso também compass-style.org/reference/compass/css3/appearance

Patrick Beeson

Eu gostaria de ter feito essa pesquisa no Google há 12 horas ... OBRIGADO.

Elly Post

Muito bom! não pensei que esse tipo de problema nos ocorreu também no iOS! Mais uma vez, muito obrigado por isso!

Saurabh Prajapati -

Adicione este código ao arquivo css:

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

Isso vai ajudar.

subindas pm
fonte

Ótimo! Formar botão enviar agora parece como deveria no meu iPad

peterkodermac

@peterkodermac, por favor, não esqueça de adicionar a classe CSS pai, caso contrário, isso pode afetar todos os campos de entrada.

Sub-pm pm

A resposta acima para a aparência do kit da web fez a mágica, mas o botão ainda parecia meio pálido / sem brilho em comparação com o navegador em outros dispositivos / desktop. Eu também tive que definir a opacidade para completa (varia de 0 a 1)

-webkit-appearance:none;
opactiy: 1

Após definir a opacidade, o botão parecia o mesmo em todos os diferentes dispositivos / emulador / área de trabalho.

Priyank Thakkar
fonte