web-dev-qa-db-ja.com

CSSのみの入力フィールドのプレースホルダーテキスト（JavaScriptなし）

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

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

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

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

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

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

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

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

htmlcssplaceholder
10
David Jones

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

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

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

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>
31
Jay

これを行うには、<label>を使用してインデックスの後ろにz-indexを配置し、background-colorに透明な<input>を使用します。 :focusを使用して、白い背景に変更します。

:first-lineには、Firefoxに関するいくつかの問題があります。

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

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

出力：

enter image description here

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

これを試して：

[〜＃〜] html [〜＃〜]

<div>
    <input type="text" id="text"></input>
    <label for="text">required</label>
</div>

[〜＃〜] css [〜＃〜]

.text-wrapper {
    position: relative;
}
.text-input-label {
    position: absolute;
    /* left and right properties are based on margin, border, outline and padding of the input text field */
    left: 5px;
    top: 3px;
    color: #D1D1D1;
}
#text:focus + label {
    display: none;
}

Working Fiddle

1
Mr_Green

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

目的を達成するために追加のdivは必要ありません。

0
Knu

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

ヒント：

input:valid { background-color:white; }

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

<input type="email" />フィールドを使用すると、疑似クラス:validが有効になり、実際に有効なメール形式（「[email protected]」など）または.netや.orgなどの入力が必要になります。 ）。

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

0
code-sushi