Preenchimento de CSS do espaço reservado HTML5

Eu já vi esse post e tentei de tudo para alterar o preenchimento do meu espaço reservado, mas, infelizmente, parece que ele não quer cooperar.

Enfim, aqui está o código para o css. ( EDIT : Este é o css gerado a partir de sass)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

E aqui está o html simples:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

Bem simples? o espaço reservado está desativado por algum motivo, mas quando você tenta digitar o campo de entrada, o texto está alinhado. Parece que você só pode alterar a cor (for webkit) do espaço reservado, mas se eu tentar editar o preenchimento da entrada que contém, isso destruirá o design da entrada! puxa o cabelo

Aqui estão as telas do espaço reservado e do campo de entrada com entrada de texto:

EDIT :

Por enquanto, recorri a este plugin jquery .

Funciona imediatamente e corrige o problema do meu chrome. Eu ainda gostaria de descobrir qual é o problema (se tiver algo a ver com o MY chrome ou algo assim)

Tenho certeza de que não são os estilos desde que John Catterfeld o reproduziu sem problemas, então espero que alguém lá fora ainda possa me indicar a direção certa do motivo pelo qual isso está acontecendo comigo (o cromo do meu cliente também.) provavelmente é nativo do Chrome / OSX se John estiver usando o Windows)

Eu tenho o mesmo problema.

Corrigi-o removendo a altura da linha da minha entrada. Verifique se há alguma altura de linha que está causando o problema

Eu tive um problema semelhante, meu problema era com o preenchimento lateral e a solução era com recuo de texto, não sabia que esse recuo afetava a posição lateral do espaço reservado.

input{
  text-indent: 10px;
}

Se você deseja manter a altura da linha e forçar o espaço reservado a ter o mesmo, é possível editar diretamente o CSS do espaço reservado desde as versões mais recentes do navegador. Isso fez o truque para mim:

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}

line-height: normal; 

trabalhou para mim;)

A remoção da altura da linha realmente alinha seu texto com o espaço reservado-texto, mas não resolve o problema adequadamente, pois você precisa adaptar seu design a essa falha (não é um bug). Adicionar alinhamento vertical também não será suficiente. Eu não tentei em todos os navegadores, mas não funciona no Safari 5.1.4 com certeza.

Ouvi falar de uma correção do jQuery para isso, que não é o suporte a espaços reservados para vários navegadores (jQuery.placeholder), mas para estilos de espaços reservados, mas ainda não o encontrei.

Enquanto isso, você pode resolver a tabela nesta página, que mostra suporte a navegadores diferentes para estilos diferentes.

Edit: Encontrado o plugin! O jquery.placeholder.min.js fornece recursos completos de estilo e suporte a vários navegadores.

Eu tive um problema, que aparece apenas no Internet Explorer. O campo de entrada foi estilizado

height:38px;
line-height:38px;

Infelizmente, no IE, o espaço reservado inicial não aparece na posição correta. Mas, quando clico no campo e deixo esse campo, o espaço reservado aparece na posição correta.

Minha solução foi definir:

line-height:normal;

A configuração line-height: 0px;corrigiu para mim no Chrome

Eu criei um violino usando sua captura de tela como imagem de fundo e removendo a marcação extra, e parece funcionar bem

http://jsfiddle.net/fLdQG/2/ (é necessário navegador da Webkit)

Isso funciona para você? Caso contrário, você pode atualizar o violino com sua marcação exata e CSS?

Percebi o problema no momento em que atualizei o Chrome no os x para a versão estável mais recente (9.0.597.94), portanto esse é um bug do Chrome e espero que seja corrigido.

Estou tentado a nem tentar contornar isso e apenas esperar pela correção. Significará apenas mais trabalho para retirá-lo.

O espaço reservado não é afetado line-heighte paddingé inconsistente nos navegadores.

Eu encontrei outra solução embora.

VERTICAL-ALIGN. Esta é provavelmente a única vez que funciona, mas tente fazer isso e desobstrua muitas linhas de código CSS.

Remover altura da linha ou definir usando preenchimento ... está funcionando em todos os navegadores

Encontrei a resposta que remediou minhas frustrações com relação a isso no blog de John Catterfeld .

... O Chrome (v20-30) implementa quase todos os estilos, mas com uma grande ressalva - os estilos de espaço reservado não redimensionam a caixa de entrada, portanto, fique longe de coisas como altura da linha e preenchimento na parte superior ou inferior.

Se você estiver usando altura de linha ou preenchimento, ficará frustrado com o espaço reservado resultante. Eu não encontrei uma maneira de contornar isso até este ponto.

Se você deseja mover o texto do espaço reservado para a direita e deixar o cursor no espaço em branco, adicione espaço (s) no início do atributo do espaço reservado:

<input type="email" placeholder="  Your email" />

Eu testei quase todos os métodos fornecidos aqui nesta página para o meu aplicativo Angular. Só encontrei solução via  que insere espaços ou seja

Material angular

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

Material não angular

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>