Riempimento CSS segnaposto HTML5

Ho già visto questo post e provato tutto il possibile per cambiare l'imbottitura per il mio segnaposto, ma purtroppo sembra proprio che non voglia collaborare.

Comunque, ecco il codice per il CSS. ( EDIT : questo è il css generato da 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;
}

Ed ecco il semplice html:

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

Abbastanza semplice? il segnaposto è disattivato per qualche motivo ma quando si tenta di digitare nel campo di input, il testo è allineato. Sembra che puoi solo cambiare il colore (per webkit) del segnaposto, ma se provo a modificare il riempimento dell'ingresso contenente, rovina il design dell'input! tira fuori i capelli

Ecco le schermate del segnaposto e del campo di input con input di testo:

MODIFICA :

Per ora ho fatto ricorso a questo plugin jquery .

Funziona immediatamente e risolve il problema del mio Chrome. Vorrei ancora scoprire qual è il problema (se ha qualcosa a che fare con MY Chrome o qualcosa del genere)

Sono abbastanza sicuro che non siano gli stili da quando John Catterfeld lo ha riprodotto senza problemi, quindi spero che qualcuno là fuori possa ancora indicarmi la giusta direzione sul perché questo sta accadendo anche a me (anche il Chrome del mio cliente. questo è probabilmente nativo di Chrome / OSX se John utilizza Windows)

Ho avuto lo stesso problema.

L'ho risolto rimuovendo l'altezza della linea dal mio input. Controlla se c'è qualche altezza della linea che sta causando il problema

Ho avuto un problema simile, il mio problema era con l'imbottitura laterale e la soluzione era, con il rientro del testo, non mi rendevo conto che il rientro del testo influiva sulla posizione laterale del segnaposto.

input{
  text-indent: 10px;
}

Se si desidera mantenere l'altezza della linea e forzare lo stesso segnaposto, è possibile modificare direttamente il segnaposto CSS a partire dalle versioni più recenti del browser. Questo ha fatto il trucco per me:

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; 

ha lavorato per me;)

La rimozione dell'altezza della linea rende effettivamente il testo allineato con il testo segnaposto, ma non risolve correttamente il problema poiché è necessario adattare il progetto a questo difetto (non è un bug). L'aggiunta di vertical-align non farà neanche l'affare. Non ho provato in tutti i browser, ma di sicuro non funziona in Safari 5.1.4.

Ho sentito parlare di una correzione jQuery per questo, che non è il supporto segnaposto tra browser (jQuery.placeholder), ma per lo styling dei segnaposto, ma non l'ho ancora trovato.

Nel frattempo, puoi risolvere la tabella in questa pagina che mostra supporto browser diverso per stili diversi.

Modifica: trovato il plugin! jquery.placeholder.min.js ti offre sia le funzionalità di stile complete sia il supporto cross-browser nell'affare .

Ho avuto un problema, che appare solo in Internet Explorer. Il campo di input è stato disegnato

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

Sfortunatamente in IE il segnaposto iniziale non appare nella posizione corretta. Ma quando ho cliccato sul campo e poi ho lasciato questo campo, il segnaposto è apparso nella posizione giusta.

La mia soluzione era quella di impostare:

line-height:normal;

L'impostazione l'ha line-height: 0px;risolto per me in Chrome

Ho creato un violino usando il tuo screenshot come immagine di sfondo e togliendo il mark-up extra e sembra funzionare bene

http://jsfiddle.net/fLdQG/2/ (è richiesto il browser webkit)

Per te funziona? In caso contrario, puoi aggiornare il violino con il tuo markup e CSS esatti?

Ho notato il problema nel momento in cui ho aggiornato Chrome su OS X all'ultima versione stabile (9.0.597.94), quindi si tratta di un bug di Chrome e, si spera, verrà risolto.

Sono tentato di non tentare nemmeno di aggirare questo problema e di aspettare la correzione. Significa solo più lavoro per eliminarlo.

Il segnaposto non è interessato da line-heighted paddingè incoerente nei browser.

Ho trovato un'altra soluzione però.

VERTICAL-ALIGN. Questa è probabilmente l'unica volta che funziona, ma provalo invece e scavare molte righe di codice CSS.

Rimuovi l'altezza della linea o imposta usando l'imbottitura ... funziona in tutto il browser

Ho trovato la risposta che ha posto rimedio alle mie frustrazioni al riguardo sul blog di John Catterfeld .

... Chrome (v20-30) implementa quasi tutti gli stili ma con un avvertimento importante: gli stili segnaposto non ridimensionano la casella di input, quindi stai lontano da cose come l'altezza della linea e l'imbottitura in alto o in basso.

Se stai usando l'altezza della linea o l'imbottitura, sarai frustrato dal segnaposto risultante. Non ho trovato un modo per aggirare questo fino a questo punto.

Se si desidera spostare il testo segnaposto a destra e lasciare il cursore sullo spazio vuoto, è necessario aggiungere uno o più spazi all'inizio dell'attributo segnaposto:

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

Ho testato quasi tutti i metodi indicati qui in questa pagina per la mia app Angular. Solo io ho trovato una soluzione  che inserisce spazi, ad es

Materiale angolare

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

Materiale non angolare

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