Remova a sombra interna da área de texto no Mobile Safari (iPhone)

152

Por padrão, parece que o Mobile Safari adiciona a sombra interna superior a todos os campos de entrada, incluindo a área de texto. Existe uma maneira de remove-lo?

É especialmente feio quando você tem um fundo branco.

iphone mobile mobile-safari Lyon
fonte

Respostas:

340

Adicionando este estilo css:

-webkit-appearance: none;
Lyon
fonte
26
ter cuidado ao adicionar esta propriedade do tipo de entrada caixa de seleção e botões de rádio seletores, porque ele esconde as caixas de seleção e botões de rádio;)
Zain Shaikh
14
Obrigado pela resposta Lyon. Btw, a melhor maneira de usá-lo é aplicá-lo apenas a textarea, input[type="text"], input[type="submit"].
Jgthms
8
Não esqueça input[type="password"]também.
Nick Pyett
7
Não esqueça [type="email"]também!
Willster
35
Pode ser mais fácil usar o operador not dependendo dos tipos de entrada que você estiver usando: #input:not([type=checkbox]):not([type=radio])
Justin Fisher
30

Ao adicionar o estilo CSS

-webkit-appearance: none;

vai funcionar, ele se livra de tudo. Você pode tentar isso:

box-shadow: none !important;

Dessa forma, você mantém a seta para baixo.

Justin Tolchin
fonte
6
Apenas adicionar propriedade box-shadow não funciona. A sombra interna ainda aparece no Safari no iOS.
silentmouth
22

Aqui está a solução fácil

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
IqbalBary
fonte
9

Às vezes, você pode ter uma folha de estilo quebrada, appearance: none;portanto, uma maneira de corrigi-la quando isso acontece é usar caret. A melhor maneira será reescrever seu código e descobrir o que faz parte dele, estragar o estilo denone

Antes de usar, caretvocê precisa saber que isso pode causar problemas com outros estilos

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

NOTA: Use none, caretnão é o ideal.

TheCrazyProfessor
fonte
-31

A definição de propriedades backgrounde e bordercss da inputtag também parece funcionar.

Tente o seguinte:

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>
MTS
fonte
9
Incorreto e enganoso. Por favor, teste o seu código no dispositivo direita antes de postar ...
Ariel
Realmente resposta errada, nada sobre isso é o que OP perguntar sobre
Jacta