Desativar o arredondamento do elemento de entrada do iPhone / Safari

374

Meu site é bem renderizado no navegador iPhone / Safari, com uma exceção: Meus campos de entrada de texto têm um estilo arredondado estranho que não parece nada bom com o restante do meu site.

Existe uma maneira de instruir o Safari (via CSS ou metadados) para não arredondar os campos de entrada e torná-los retangulares conforme o esperado?

html css iphone mobile-safari css-reset Alex
fonte
11
Eu me pergunto por que nenhuma redefinição de CSS parece conter essa regra css super fácil. É uma mentira.
Toskan
11
Na verdade, eu criei uma redefinição de CSS com base no redefinição de css de eric meyer 2 com o css necessário adicionado que você encontra na resposta aqui. Está disponível no github: github.com/Jossnaz/JossiCssReset
Toskan
11
Cuidado -webkit-appearance: none;, acho melhor limitar essa condição ao escopo de um elemento de entrada específico. Caso contrário, pode ocultar os elementos de entrada de rádio, se você os tiver na página.
quas

Respostas:

659

No iOS 5 e posterior, o bom e velho border-radiusfaz o truque:

input {
    border-radius: 0;
}

Se você deve remover apenas os cantos arredondados no iOS ou, por algum motivo, não conseguir normalizar os cantos arredondados nas plataformas, use a -webkit-border-radiuspropriedade prefixada , que ainda é suportada. É claro que note que a Apple pode optar por abandonar o suporte à propriedade prefixada a qualquer momento, mas considerando suas outras características CSS específicas da plataforma, é provável que elas continuem por aí.

Nas versões herdadas, era necessário definir -webkit-appearance: none:

input {
    -webkit-appearance: none;
}
BoltClock
fonte
11
A partir do iOS 5, isso removerá apenas a sombra interna. Verifique a resposta de Piyush para remover também os cantos arredondados.
Jonathan Freeland
6
-webkit-appearancena verdade, nada tem a ver com sombra interna e cantos arredondados. Não use apenas para isso. css-infos.net/property/-webkit-appearance
Rudie
14
"Se o IOS quiser cantos arredondados e sombras, permita que os usuários do IOS os possuam": isso é completamente inaceitável na minha situação, e provavelmente na maioria dos outros também.
precisa
2
!! você não deve usar esse método. Faz com que a caixa de seleção pareça indisponível.
synthresin 27/04
10
Para o <input type="search">iOS 10 eu ainda precisava -webkit-appearance: none;.
Gabriel Smoljár 3/17/17
55

input -webkit-appearance: none; sozinho não funciona.

Tente adicionar -webkit-border-radius:0px;além disso.

justadev
fonte
11
Eu tinha necessidade de adicionar o -webkit-border-radiusatributo para <input type="text">remover os cantos arredondados no iOS 5.
Jonathan Freeland
Não é necessário adicionar px após o 0
mintedsky 24/10/2015
42

É a melhor maneira de remover o arredondado no IOS.

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

Nota: Não use este código para a opção Selecionar. Terá problema em nosso select.

KoemsieLy
fonte
2
Eu descobri que o uso input[type]parece fazer o truque para todas as entradas.
JacobTheDev
11

A resposta aceita fez o botão de opção desaparecer no Chrome. Isso funciona:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}
François Romain
fonte
7

Aqui está a solução completa para o Compass (SCSS):

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}
Johansrk
fonte
14
Apenas uma observação, o @include border-radius(0);mixin estará disponível apenas se você o tiver definido ou estiver usando a estrutura Compass, não apenas o SASS baunilha.
waffl
Apenas uma observação: se você estiver usando SCSS, provavelmente também deverá usar o autoprefixer.
Christian
6

Para mim, no iOS 5.1.1 em um iPhone 3GS, tive que limpar o estilo de um campo de pesquisa e defini-lo para o estilo pretendido

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

Fazer -webkit-border-radius: 0;sozinho não apagou o estilo nativo. Isso também foi para uma visualização da web em um aplicativo nativo.

Chris Bernardi
fonte
5

Eu tive o mesmo problema, mas apenas para o botão enviar. Necessário para remover a sombra interna e os cantos arredondados -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }
seanjacob
fonte
4

Se você usar o normalize.css, essa folha de estilo fará algo parecido input[type="search"] { -webkit-appearance: textfield; }.

Isso tem uma especificidade mais alta do que um seletor de classe único .foo, portanto, lembre-se de que você não pode fazer exatamente isso .my-field { -webkit-appearance: none; }. Se você não tiver uma maneira melhor de obter a especificidade correta, isso ajudará:

.my-field { -webkit-appearance: none !important; }

Henrik N
fonte
4

Tente este, por favor:

Tente adicionar inputCss assim:

 -webkit-appearance: none;
       border-radius: 0;
Ivin Raj
fonte
3

Eu usei um raio de borda simples: 0; para remover os cantos arredondados dos tipos de entrada de texto.

Jesse
fonte
0

Para renderizar os botões corretamente no Safari e em outros navegadores, você precisará fornecer um estilo específico para os botões, além de configurar a aparência do kit da web como nenhum, por exemplo:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf
CpnCrunch
fonte