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?

— 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

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