10

フォーム内の各フィールドにラベルを付ける代わりに、（設計の観点から）各フィールドにプレースホルダーテキストを含めることが望ましい場合があります。たとえば、これを使用する代わりに、次のようにします。

             ----------------------------------
Full Name:  |                                  |
             ----------------------------------

あなたはこれを持っています：

 ----------------------------------
| Full Name                        |
 ----------------------------------

フィールドをクリックすると、テキストが消え、好きなように書くことができます。テキストを入力せずにフィールドをスキップすると、プレースホルダーが再表示されます。

私はこれが多くの方法で行われるのを見てきましたが、すべてのメソッドはJavaScriptを含みます。たとえば、Twitterはサインアップページでまともな仕事をしますが、Javascriptが無効になっていると、「フルネーム」という単語の上に自分の名前を入力することになります。

JavaScriptを無効にしても機能するCSSのみのメソッドを探しています。私が思いついた唯一の解決策は、<input>タグの背景を目的のテキストの画像に設定し、input:focus疑似クラスを使用して、誰かがテキストボックスをクリックしたときに背景画像をクリアすることです。これはうまくいくようですが、画像を使用する必要がないのはいいことです。

誰かがこれを行う方法についての良いリソースを知っていますか？

4

5 に答える 5

31

これは推奨される方法であり、現在のすべてのブラウザーで機能します。

<input type="text" name="" placeholder="Full Name"/>

このバージョンは IE9 以前で動作します:

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>
于 2012-12-01T15:01:17.870 に答える
15

<label>これは、を使用してインデックスの後ろに配置しz-index、 を透明background-colorにすることで実行できます<input>。:focus白地に変更する場合に使用します。

:first-lineには Firefox の問題があります。

デモ: http://jsfiddle.net/ThinkingStiff/bvJ43/

注:ぼかしの問題については、以下の code-sushi のコメントを参照してください: CSS のみの入力フィールドのプレースホルダー テキスト (JavaScript なし)

出力：

ここに画像の説明を入力

HTML:

<label class="input">enter name<input /><label>​

CSS:

.input {
    color: gray;
    display: block;
    font-size: small;
    padding-top: 3px;
    position: relative;
    text-indent: 5px;
}

input {
    background-color: transparent;
    left: 0;
    position: absolute; 
    top: 0;   
    z-index: 1;
}

input:focus, input:first-line {
    background-color: white;
}
于 2012-07-07T00:08:22.277 に答える
0

これを試してください：オーバーフローするプレースホルダーと複数入力のケースを解決します。秘訣は、ラベルを入力の後ろに移動し、視覚的に並べ替えることです。

あなたが望むものを達成するために余分なdivは必要ありません。

于 2012-07-07T00:24:54.337 に答える
0

上記のおそらくCSSのみの回答はすべて、ユーザーがその特定のフィールドに集中しなくなったときに、疑似プレースホルダーとして機能するラベルが「にじみ出る」のを防ぐために必要な重要なコンポーネントを無視しています。

ヒント：

input:valid { background-color:white; }

疑似クラス:validは、フィールドに 以外の値が含まれるたびに取得します''。したがって、ユーザーが自分のフィールドに何かを入力すると、そこに表示されていたラベルは表示されなくなります。

フィールドに注意してください<input type="email" />。疑似クラス:validは、有効な電子メール形式の入力を必要とし、実際に必要とします (例: "xxxx@xxx.com" -- または .net または .org など)。

ここでこれを行う方法の完全な手順: http://css-tricks.com/float-labels-css/

于 2014-10-31T19:07:25.190 に答える