HTML5-Platzhalter-CSS-Auffüllung

Ich habe diesen Beitrag bereits gesehen und alles versucht, um die Polsterung für meinen Platzhalter zu ändern, aber leider scheint es, dass es einfach nicht kooperieren will.

Wie auch immer, hier ist der Code für das CSS. ( BEARBEITEN : Dies ist das generierte CSS von 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;
}

Und hier ist das einfache 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>

Ziemlich einfach? Der Platzhalter ist aus irgendeinem Grund deaktiviert. Wenn Sie jedoch versuchen, das Eingabefeld einzugeben, wird der Text ausgerichtet. Es scheint, dass Sie nur die Farbe ändern können (zwebkit ) des Platzhalters , aber wenn ich versuche, die Auffüllung der enthaltenen Eingabe zu bearbeiten, wird das Design der Eingabe zerstört! zieht Haare aus

Hier sind Screenies des Platzhalters und des Eingabefeldes mit Texteingabe:

EDIT :

Im Moment habe ich darauf zurückgegriffen Moment habe JQuery-Plugin zurückgegriffen .

Es funktioniert sofort und behebt das Problem meines Chroms. Ich möchte immer noch herausfinden, wo das Problem liegt (wenn es etwas mit MEINEM Chrom oder so etwas zu tun hat)

Ich bin mir ziemlich sicher, dass es nicht die Stile sind, da John Catterfeld sie ohne Probleme reproduziert hat. Ich hoffe, dass mich jemand da draußen immer noch in die richtige Richtung weist, warum mir das passiert (auch das Chrom meines Kunden. Also Dies ist wahrscheinlich in Chrome / OSX beheimatet, wenn John Windows verwendet.

Ich habe das gleiche Problem.

Ich habe es behoben, indem ich die Zeilenhöhe aus meiner Eingabe entfernt habe. Überprüfen Sie, ob eine Linienhöhe vorliegt, die das Problem verursacht

Ich hatte ein ähnliches Problem, mein Problem war mit dem Seitenauffüllen, und die Lösung war mit, Text-Einzug, ich wusste nicht, dass Text-Einzug die Platzhalter-Seitenposition beeinflusst.

input{
  text-indent: 10px;
}

Wenn Sie Ihre Zeilenhöhe beibehalten und den Platzhalter für dieselbe erzwingen möchten, können Sie das Platzhalter-CSS seit den neueren Browserversionen direkt bearbeiten. Das hat den Trick für mich getan:

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; 

hat für mich gearbeitet;)

Durch das Entfernen der Zeilenhöhe wird Ihr Text zwar an Ihrem Platzhaltertext ausgerichtet, Ihr Problem wird jedoch nicht ordnungsgemäß gelöst, da Sie Ihr Design an diesen Fehler anpassen müssen (es ist kein Fehler). Das Hinzufügen von vertikaler Ausrichtung reicht ebenfalls nicht aus. Ich habe es nicht in allen Browsern versucht, aber es funktioniert sicher nicht in Safari 5.1.4.

Ich habe von einem jQuery-Fix ​​dafür gehört, bei dem es sich nicht um eine browserübergreifende Platzhalterunterstützung (jQuery.placeholder) handelt, sondern um das Platzieren von Platzhaltern, aber ich habe ihn noch nicht gefunden.

In der Zwischenzeit können Sie die Tabelle auf dieser Seite auflösen unterschiedliche Browserunterstützung für unterschiedliche Stile angezeigt wird.

Edit: Plugin gefunden! jquery.placeholder.min.js bietet Ihnen sowohl umfassende Styling-Funktionen als auch browserübergreifende Unterstützung.

Ich hatte ein Problem, das nur im Internet Explorer angezeigt wird. Das Eingabefeld wurde gestaltet

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

Leider erscheint im IE der ursprüngliche Platzhalter nicht an der richtigen Position. Aber wenn ich in das Feld geklickt und dieses Feld dann verlassen habe, erscheint der Platzhalter an der richtigen Position.

Meine Lösung bestand darin, Folgendes festzulegen:

line-height:normal;

Die Einstellung hat line-height: 0px;es für mich in Chrome behoben

Ich habe eine Geige erstellt, die Ihren Screenshot als Hintergrundbild verwendet und das zusätzliche Markup entfernt, und es scheint gut zu funktionieren

http://jsfiddle.net/fLdQG/2/ (Webkit-Browser erforderlich)

Geht das für dich? Wenn nicht, können Sie die Geige mit Ihrem genauen Markup und CSS aktualisieren?

Ich habe das Problem in dem Moment bemerkt, in dem ich Chrome auf OS X auf die neueste stabile Version (9.0.597.94) aktualisiert habe. Dies ist also ein Chrome-Fehler und wird hoffentlich behoben.

Ich bin versucht, nicht einmal zu versuchen, dies zu umgehen, und nur auf die Lösung zu warten. Es wird nur mehr Arbeit bedeuten, es herauszunehmen.

Der Platzhalter ist von line-heightund nicht betroffenpadding in Browsern inkonsistent.

Ich habe jedoch eine andere Lösung gefunden.

VERTICAL-ALIGN. Dies ist wahrscheinlich das einzige Mal, dass es funktioniert, aber versuchen Sie es stattdessen und brechen Sie viele Zeilen CSS-Code aus.

Entfernen Sie die Zeilenhöhe oder stellen Sie sie mit Polstern ein. Dies funktioniert in allen Browsern

Die Antwort, die meine diesbezüglichen Frustrationen behebt, fand ich in John Catterfelds Blog .

... Chrome (v20-30) implementiert fast alle Stile, jedoch mit einer großen Einschränkung: Die Platzhalterstile ändern die Größe des Eingabefelds nicht. Halten Sie sich daher von Dingen wie Zeilenhöhe und Auffüllen oben oder unten fern.

Wenn Sie Zeilenhöhe oder Polsterung verwenden, werden Sie mit dem resultierenden Platzhalter frustriert sein. Ich habe bis jetzt keinen Weg gefunden, das zu umgehen.

Wenn Sie den Platzhaltertext nach rechts verschieben und den Cursor auf dem leeren Feld lassen möchten, müssen Sie am Anfang des Platzhalterattributs Leerzeichen hinzufügen:

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

Ich habe fast alle hier auf dieser Seite angegebenen Methoden für meine Angular-App getestet. Nur ich fand eine Lösung über  das Einfügen von Leerzeichen dh

Winkelmaterial

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

Nicht eckiges Material

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