中央のHTML入力テキストフィールドのプレースホルダー

153

入力フィールドのプレースホルダーの配置を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="support@socialpic.org" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>

html css

— max_
ソース

実際には答えではありませんが、jQuery Mobileがこれを行うので、jQuery Mobileがそれをどのように達成したかを確認する必要があります。

— エヴァンス

私にとって、あなたのコードはあなたがinput.placeholder少しを取り除くときに機能します。入力内のテキストを中央に揃えると、プレースホルダーも揃えられます。

— Cannicide 2017

283

プレースホルダーのスタイルのみを変更したい場合

::-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; 
}

— prarthana.m
ソース

5

これは、ほとんどの入力フィールドでは正常に機能しますが、日付タイプでは機能しません。それを日付どおりに機能させる方法を知っていますか？

— Cornelius Parkin

92

input{
   text-align:center;
}

は、あなたが必要とすることすべてです。

実施例 FF6インチこの方法は、ブラウザ間の互換性がないようです。

以前のCSSは、「プレースホルダー」のクラスを持つ入力要素のテキストを中央に配置しようとしていました。

— ジェイミー・ディクソン
ソース

5

プレースホルダーとフィールドに入力したテキストを中央揃えにしたくない

— max_

1

はい。これは、この例が行うことです。プレースホルダーはフィールド内のテキストです。

— ジェイミーディクソン

2

この例では機能しません。この例では、プレースホルダーは左揃えです。

— max_

BootstrapやSemantic UIなどのライブラリを使用している場合は、スタイルをインラインで追加する必要があります（つまり、スタイル<input type="text" placeholder="Search..." style="text-align: right;">を機能させるため）。または、important!外部ファイルを使用している場合は、CSSルールに追加します。

— Behdad、2015年

max_の問題は、ブラウザの互換性の問題にすぎないようです。これは、Safariを除くほとんどの主要ブラウザで正常に動作します。

— Cannicide 2017

7

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

— エリック・ペトルチェッリ
ソース

7

あなたはこのようにすることができます：

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

ここで働くCodePen

— イアンデビッドボシオカ
ソース

これだけが私のために働いています。HTMLに追加されたスタイルが優先されたり、他のすべてのスタイルを上書きしたりする場合があります。

— Gokul 2017

5

それは私のニーズにうまく機能します、あなたはあなたのブラウザの互換性をチェックするべきです、私は後方互換性を気にしなかったので問題はありませんでした

.inputclass::-webkit-input-placeholder {
text-align: center;
}
.inputclass:-moz-placeholder { /* Firefox 18- */
text-align: center;  
}
.inputclass::-moz-placeholder {  /* Firefox 19+ */
text-align: center;  
}
.inputclass:-ms-input-placeholder {  
text-align: center; 
}

— デニス
ソース

3

この回答は別の回答の直接のコピーではありませんか？

— Anwar

3

この方法でもプレースホルダーのcssを記述できます

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

— アンキット・ジャイスワル
ソース

2

あなたはこのように試すことができます：

input[placeholder] {
   text-align: center;
}

— 歌見ラニ
ソース

1

::-webkit-input-placeholder {
 font-size: 14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { 
 font-size:14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { 
 font-size: 14px;
 color: #d0cdfa; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}

— ルレシュ・バット
ソース

0

以下のコードスニペットを使用することで、入力内のプレースホルダーを選択し、内部に配置されたコードはプレースホルダーにのみ影響します。

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

— ブランドンメイ
ソース

この回答は、承認された回答とは異なるものを提供していないようです。

— アントンメンショフ

この回答は、すべてのプレースホルダーではなく、1つの特定の要素のみのプレースホルダーを変更する方法のヒントを提供します。例えば.foo::-webkit-input-placeholder { … }。

— Henrik N

0

以下のようなクラスでsetを使用して、テキストクラス
CSS を入力するように設定できます。

 .place-holder-center::placeholder {
        text-align: center;
    }

HTML：

<input type="text" class="place-holder-center">

— モハマドダリリ
ソース