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

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