web-dev-qa-db-ja.com

入力ボックスのプレースホルダーテキストの配置を調整するにはどうすればよいですか？

enter image description here

3番目のボックスのプレースホルダーテキストは、一番上になりたいときに中央に表示されます。 [〜＃〜] 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>

これがJSFiddle

htmlcssplaceholder
9
Orahmax

複数行の入力フィールドが必要な場合は、textarea要素を使用する必要があります。

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

次に、textareaセレクターを使用して、これを好きなようにスタイル設定できます。

#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デモ 。

12
James Donnelly

プレースホルダーテキストのスタイルを設定するには、ベンダープレフィックスのCSSプロパティが必要です。

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

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

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

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

このドキュメントを読む

更新：

あなたの場合、text-areaを使用する代わりに入力ボックスを使用します。したがって、テキストを上に移動したい場合はuse a text-area instead of using input。

4
Ishan Jain

これを試してみてください

::-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; 
}
1
Shabeer Mothi

の代わりに

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

使用する：

<li><textarea rows="4" cols="50" placeholder="Message"></textarea> </li>
0
Dipak