Wie stellen Sie die Ausrichtung der Platzhalter-text in input-box?

Wie stellen Sie die Ausrichtung der Platzhalter-text in input-box?

Den Platzhalter text in der Dritten box in der Mitte angezeigt wird, während ich wollen an der Spitze.
HTML

<div id="message">
    <ul>
      <li><h1>Send us a message</h1></li>
      <li><input type="text" placeholder="Name"></li>
      <li><input type="text" placeholder="Email"></li>
      <li><input type="text" style="height:150px;" placeholder="Message"></li>
      <li><a href="#">Send</a></li>
    </ul>
</div>

Hier ist JSFiddle

  • vielleicht sollten Sie verwenden textarea statt input type="text" für Ihre Botschaft?
InformationsquelleAutor Orahmax | 2014-01-09
  1. 12

    Wenn Sie wollen ein multi-line-input-Feld, das Sie verwenden sollten, die textarea element.

    <li>
    <textarea placeholder="Message"></textarea>
</li>

    Können Sie dann diese Art Sie jedoch, wie mit der textarea selector:

    #message input,
#message textarea {
    width: 250px;
    height: 40px;
    padding: 10px;
}

#message li input[type=text],
#message li textarea {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: none;
}

#message li textarea {
    height: 150px;
    resize: none;
}

    JSFiddle demo.

    InformationsquelleAutor James Donnelly
  2. 3

    Stil Platzhalter-text, die Sie benötigen vendor-Präfix für CSS-Eigenschaften.

    ::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

    Lesen Sie dieses Dokument

    Aktualisiert:

    In Ihrem Fall verwenden Sie den Eingabe-Feld anstelle von text-Bereich. Also, wenn Sie wollen, bewegen Sie Ihren text oben use a text-area instead of using input.

    • Wie wird dieser Platzhalter ausrichten nach oben?
    • Nein, es ist kein verschieben von text auf die Spitze, weil OP verwendet Eingabefeld anstatt der textarea.
    InformationsquelleAutor Ishan Jain
  3. 1

    Ausprobieren

    ::-webkit-input-placeholder {
   text-align:center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align:center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align:center;  
}

:-ms-input-placeholder {  
   text-align:center; 
}
    InformationsquelleAutor Shabeer Mothi
  4. 0

    statt

     <li><input type="text" style="height:150px;" placeholder="Message"></li>

    verwenden:

    <li><textarea rows="4" cols="50" placeholder="Message"></textarea> </li>
    InformationsquelleAutor Dipak
Schreibe einen Kommentar