Remover sombra de entrada iOS

No iOS (Safari 5), tenho que seguir o elemento de entrada (sombra interna superior):

Quero remover a sombra superior, o bug -webkit-appearancenão salva.

O estilo atual é:

input {    
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

Você precisará usar -webkit-appearance: none;para substituir os estilos IOS padrão. No entanto, selecionar apenas a inputtag no CSS não substituirá os estilos IOS padrão, porque o IOS adiciona seus estilos usando um seletor de atributos input[type=text]. Portanto, seu CSS precisará usar um seletor de atributo para substituir os estilos CSS IOS padrão que foram predefinidos.

Experimente isto:

input[type=text] {   
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Then Style */
    border-radius: 15px;
    border: 1px dashed #BBB;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    background: transparent;
    outline: none;    
}

Links úteis:

Você pode aprender mais sobre appearanceaqui:

http://css-tricks.com/almanac/properties/a/appearance/

Se quiser saber mais sobre seletores de atributos CSS, você pode encontrar um artigo muito informativo aqui:

http://css-tricks.com/attribute-selectors/

background-clip: padding-box;

Parece remover as sombras também.

Como @davidpauljunior mencionado; tenha cuidado ao definir-webkit-appearance um seletor de entrada geral.

webkit irá remover todas as propriedades

-webkit-appearance: none;

Tente usar a propriedade box-shadow para remover a sombra do seu elemento de entrada

box-shadow: none !important;

Tentei encontrar uma solução que a.) Funcione e b.) Sou capaz de entender por que funciona .

Eu sei que a sombra para entradas (e a borda arredondada para entrada [type = "search"]) vem de uma imagem de fundo.

Então, obviamente, definindo background-image: none foi minha primeira tentativa, mas isso não parece funcionar.

A configuração background-image: url()funciona, mas ainda estou preocupado em ter um vazio url(). Embora atualmente seja apenas um sentimento ruim.

background-clip: padding-box; parece fazer o trabalho também, mas mesmo depois de ler os documentos do "clipe de fundo", não entendo por que isso remove completamente o fundo.

Minha solução favorita:

background-image: linear-gradient(transparent, transparent);

Este é um CSS válido e eu entendo como funciona.

Embora a resposta aceita seja um bom começo, como outros apontaram, ela só funciona para entradas de quem typeé "text". Há uma miríade de outros tipos de entrada que também são renderizados como caixas de texto no iOS, portanto, precisamos expandir essa regra para levar em consideração esses outros tipos.

Aqui está o CSS que estou usando para livrar os campos de texto de entrada e áreas de texto da sombra interna, preservando o estilo padrão para botões, caixas de seleção, controles deslizantes de intervalo, menus suspensos de data / hora e botões de opção, todos criados com a <input>tag humilde também .

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Isso funciona melhor para mim. Além disso, significa que não preciso aplicá-lo a todos os tipos diferentes de entrada (por exemplo, texto, telefone, e-mail, etc.)

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}