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

— 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