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

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

3

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

e encontrei um comentário mais antigo com as mesmas respostas aqui.

https://stackoverflow.com/a/29750016/9287284

— KABA
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