iOS força cantos arredondados e brilho nas entradas

94

Os dispositivos iOS adicionam muitos estilos incômodos nas entradas de formulários, principalmente na entrada [type = submit]. Abaixo, é mostrado o mesmo formulário de pesquisa simples em um navegador de desktop e em um iPad.

Área de Trabalho:

Área de Trabalho

iPad:

iPad

A entrada [type = text] usa uma inserção de sombra de caixa CSS e eu até especifiquei -webkit-border-radius: none; que aparentemente é substituído. A cor e o formato do meu botão de entrada [type = submit] ficam completamente danificados no iPad. Alguém sabe o que posso fazer para consertar isso? Desde já, obrigado.

css ios forms inorganik
fonte
4
-webkit-aparência: nenhum; Ajuda a eliminar a maioria dos problemas, mas ainda não elimina a lacuna entre os dois elementos ou os cantos arredondados. Portanto, qualquer ajuda seria apreciada. Obrigado.
inorganik
2
Você especificou -webkit-border-radius:none;você especificou border-radius:none;?
Rigel Glen,
7
Especifiquei -webkit-appearance:nonee -webkit-border-radius:0fiz o truque no iOS para mim!
Primus202

Respostas:

183

A versão que eu tinha funcionando é:

input {
    -webkit-appearance: none;
}

Em algumas versões de navegador de webkit, você também pode se deparar com o border-radiusainda estar no lugar. Redefina com o seguinte:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

Isto pode ser estendido para aplicar a todos os webkit denominado formcomponentes, tais como input, select, buttonou textarea.

Em referência à pergunta original, você não usaria o valor 'nenhum' ao limpar qualquer elemento css baseado em unidade. Também esteja ciente de que isso oculta as caixas de seleção no Chrome, então talvez use algo como input[type=text]ou input[type=submit], input[type=text](observe que input:not([type=checkbox]), input:not([type=radio])se aplicará a todos os tipos de entrada, uma vez que cada entrada satisfaz qualquer uma dessas duas condições).

Marksyzm
fonte
5
-webkit-aparência: nenhum; Oculta caixas de seleção no Chrome - não é uma solução válida!
Nico Westerdale
2
-webkit-aparência: nenhum; faz o truque! (-webkit-border-radius não necessário)
OZZIE
Bom ponto - depende da versão do navegador, descobri, então está lá apenas para uma proteção contra falhas. Vou editar a postagem por relevância.
marksyzm
3
input: not ([type = "checkbox"]) seria a melhor maneira de evitar o problema no Chrome? Embora não funcione no IE <= 8, mas, novamente, não é isso que você está tentando consertar.
Robin French,
Usar input:not([type=checkbox]), input:not([type=radio])significa que o estilo se aplica a todos os botões do Safari, uma vez que cada botão satisfaz uma dessas duas condições. Em vez disso, eu usei input[type=submit], input[type=text].
miguelmorin
17

Você pode se livrar de mais alguns estilos de formulário, entrada, etc. de webkits com este:

input, textarea, select {
   -webkit-appearance: none;
}
usuario
fonte
Ele ainda precisaria border-radius: 0;redefinir completamente e não quer um raio de borda. Caso contrário, basta definir o border-radius.
Refilon de
3

Para o botão de envio, não use:

<input type="submit" class="yourstylehere" value="submit" />

Em vez disso, use a tag do botão:

<button type="submit" class="yourstylehere">Submit</button>

Isso funcionou para mim.

Gorila robô digital
fonte
1
FWIW, acabei de ter esse problema em um projeto, e o iPad 1 que eu estava testando também adicionou estilos às <button>tags. Portanto, acho melhor você resolver isso diretamente com CSS.
Neemzy
1

dê uma olhada em normalize.css

Há uma demonstração onde você pode testar os elementos do formulário e ver como eles se parecem no iOS. Existem várias propriedades orientadas para webkit.

Rdpi
fonte
1

Isso é o que eu uso em meus projetos

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}
Waqar Alamgir
fonte
0

Você também terá esse problema em alguns navegadores se tiver o seguinte:

<a class="btn btn-primary" href="#" type="button">Link</a>

ao invés de:

<a class="btn btn-primary" href="#" role="button">Link</a>

Isso pode acontecer se você alterar seu elemento de entrada para um elemento anker e esquecer de alterar typepara role.

Eu tive esse problema no Chrome e Safari no meu IPad.

Dirk
fonte