HTMLフォームの入力フィールドのプレースホルダーの配置を中央にするには?
以下のコードを使っているのですが、うまくいきません。
CSS ->
input.placeholder {
text-align: center;
}
.emailField {
top:413px;
right:290px;
width: 355px;
height: 30px;
position: absolute;
border: none;
font-size: 17;
text-align: center;
}
HTML ->
<form action="" method="POST">
<input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
<!<input type="submit" value="submit" />
</form>
プレースホルダーのスタイルだけを変更したい場合は
::-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;
}
input{
text-align:center;
}
があればOKです。
FF6での[作業例][1]です。この方法はクロスブラウザに対応していないようです。
以前のCSSは、"placeholder"のクラスを持つinput要素のテキストを中央に配置しようとしていました。
HTML5のプレースホルダー要素は、その要素を受け入れるブラウザに合わせてスタイリングすることができますが、その方法は、ここでご覧いただけるように、http://davidwalsh.name/html5-placeholder-css。
しかし、私はtext-align
がブラウザによって解釈されるとは思っていません。少なくともChromeでは、この属性は無視されます。しかし、color
やfont-size
、font-family
など、他のものはいつでも変更できます。このセンターの動作を取り除くことができるかどうか、デザインを見直すことをお勧めします。
**エディット
どうしてもテキストを中央揃えにしたい場合は、jQueryのコードやプラグインを使ってプレースホルダーの動作をシミュレートすることができます。以下にそのサンプルを示します。http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.
こうすることで、スタイルが機能するようになります。
input.placeholder {
text-align: center;
}