HTML5-Platzhalter-CSS-Auffüllung

133

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:

Platzhalter Text Eingabe

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.

korrodiert
quelle
2
Können Sie das generierte CSS bereitstellen? Das wäre viel einfacher zu handhaben als die SASS-Quelle.
RoToRa
+1 Das Plugin ist fantastisch - einfach und hat genau die Optionen, die ich brauche. Wahrscheinlich die beste Platzhalterlösung, über die ich bisher gestolpert bin.
Easwee
Wenn jemand ein Problem mit der Bootstrap-Einstellung hat, helfen diese beiden Optionen: Schriftgröße: groß; anstelle von px; und Zeilenhöhe: normal;
Necker

Antworten:

229

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

Johansrk
quelle
6
Falsch. Bei einem Eingabeelement wird der Platzhalter nicht durch die Zeilenhöhe beeinflusst, aber das Auffüllen ist nicht die beste Lösung. Am besten verwenden Sie die VERTICAL-ALIGN CSS-Eigenschaft (und ich weiß, dass sie normalerweise nie etwas bewirkt, in diesem Fall jedoch).
RIK
1
Ja, überraschenderweise hat DID das Problem behoben. Und der eingegebene Text bleibt auch ohne die Hilfe zur Zeilenhöhe vertikal zentriert.
hndcrftd
59
Wenn es keine direkte line-height: normal;
Zeilenhöhe
Wie auch immer, Sie müssen die Zeilenhöhe für dh Browser hinzufügen, aber das macht den Job für Safari
Kaloyan Stamatov
95

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;
}
Talsibony
quelle
28

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;
}
Floribon
quelle
25
line-height: normal; 

hat für mich gearbeitet;)

user2264934
quelle
Funktioniert in Safari.
Monteirobrena
Arbeitete in Safari
Zam85
2

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.

zykadelic
quelle
Ich habe versucht, einen Fix ohne Platzhalter zu finden, da ich das obige jquery-Plugin bereits verwendet habe :) Danke für die Hilfe!
korrodiert
Beachten Sie jedoch, dass dies zwei verschiedene Plugins sind. Ich bin nicht sicher, was der von Ihnen verwendete tut (die Demo funktioniert in keinem meiner Browser), aber dieser verwendet das Platzhalterattribut des Elements und erstellt dynamisch einen Bereich, der über dem Eingabefeld gerendert wird bietet maximale Styling-Möglichkeiten.
Zykadelic
2

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;
Babs
quelle
2

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

JobJob
quelle
2
Können Sie erklären, was dies zu der akzeptierten Antwort von vor vier Jahren beiträgt?
Nathan Tuggy
1
@ NathanTuggy Für mich schlug die akzeptierte Antwort vor, dass Sie das line-heightAttribut vollständig aus dem Element entfernen . Für mich hat das nichts getan, und was das Problem für mich behoben hat, war zu setzenline-height: 0px
JobJob
Das hier hat das Problem für mich behoben.
Aeroson
1

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?

ajcw
quelle
hmm ich habe den link überprüft und es funktioniert auch bei mir nicht. Glaubst du, es gibt ein Plugin / etwas in meinem Chrome, das es verursacht? Screenshot: grab.by/8OFf
korrodiert
überprüfte es mit Safari und es funktioniert. sollten Chrom und Safari nicht dasselbe rendern?
korrodiert
Hmm, mir ist kein Plugin bekannt, das sich so auf Ihr Layout auswirken würde, aber Chrome und Safari funktionieren beide gut für mich (und ja, sie sollten dasselbe rendern).
Ajcw
1
Ich benutze 9.0.597.84 (Chrome) auf Mac. welches benutzt du
korrodiert
Ich verwende Chrome 8.0.552.237 unter Windows 7.
Ajcw
1

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.

werden
quelle
mmm also ist es dann bestätigt? Gibt es eine Möglichkeit, unser Chrom "herunterzustufen", um zu überprüfen, ob es wirklich Chrom ist?
korrodiert
1
Es ist 2013 und ich habe immer noch dieses Problem mit der neuesten Version von Chrome: Version 27.0.1453.116 m
Postscripter
1

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.

RIK
quelle
2
tut nichts für mich.
Postscripter
1

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

Hiren Dihora
quelle
1

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.

rb-
quelle
1

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" />
römisch
quelle
1

Ich habe fast alle hier auf dieser Seite angegebenen Methoden für meine Angular-App getestet. Nur ich fand eine Lösung über &nbsp;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>

WasiF
quelle