css - フォーカス時にプレースホルダーの色を変更するには?

Question

入力フィールドにフォーカスがあるときにプレースホルダーの色を変更するには? この css を使用してデフォルトの色を設定しますが、フォーカス時に変更するにはどうすればよいですか?

::placeholder { color: blue; }

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

/* Firefox < 19 */
:-moz-placeholder { color: blue; }

/* Firefox > 19 */
::-moz-placeholder { color: blue; }

/* Internet Explorer 10 */
:-ms-input-placeholder { color: blue; }

score 131 · Accepted Answer

これを試してください、これはうまくいくはずです:

input::-webkit-input-placeholder {
    color: #999;
}
input:focus::-webkit-input-placeholder {
    color: red;
}

/* Firefox < 19 */
input:-moz-placeholder {
    color: #999;
}
input:focus:-moz-placeholder {
    color: red;
}

/* Firefox > 19 */
input::-moz-placeholder {
    color: #999;
}
input:focus::-moz-placeholder {
    color: red;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: #999;
}
input:focus:-ms-input-placeholder {
    color: red;
}

例を次に示します: http://jsfiddle.net/XDutj/27/

score 5 · Accepted Answer

Pranav の回答に加えて、テキストエリアとの互換性を考慮してコードを改良しました。

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }

:focus::-webkit-input-placeholder { color: #ccc; }
:focus:-moz-placeholder { color: #ccc; }

score 1 · Accepted Answer

私はJQueryでこの解決策を見つけました:

 $('input[type="text"]').each(function(){

    $(this).focus(function(){
      $(this).addClass('input-focus');
    });

    $(this).blur(function(){
      $(this).removeClass('input-focus');
    });

  });

このCSSで：

.input-focus::-webkit-input-placeholder { color: #f00; }    
.input-focus:-moz-placeholder { color: #f00; }
.input-focus:-ms-input-placeholder { color: #f00; }

score 1 · Accepted Answer

これを試して：

HTML

<input type='text' placeholder='Enter text' />

CSS

input[placeholder]:focus { color: red; }

score 1 · Accepted Answer

スター*を使用してすべてを選択します

*::-webkit-input-placeholder { color: #999; }


*:-moz-placeholder { color: #999; }


*::-moz-placeholder { color: #999; }


*:-ms-input-placeholder { color: #999; }

score 0 · Accepted Answer

Firefox 19から：フォーム要素をプレースホルダー属性と一致させる：-moz-placeholder疑似クラスが削除され、代わりに::-moz-placeholder疑似要素が追加されました。

input:focus::-moz-placeholder { color: transparent; }

score -1 · Accepted Answer

入力フィールドがフォーカスされたときに上に縮小するマテリアルデザインのアニメーションプレースホルダーを作成できます。

<div class="field">
 <input type="text" name="user" required><br>
 <label>Enter Username</label>
 </div>

基本的に、ラベルフィールドはプレースホルダーのように機能します。これは、css を使用してのみ行うことができます。ここで説明http://www.voidtricks.com/create-material-design-animated-placeholder/

css - フォーカス時にプレースホルダーの色を変更するには?

10 に答える 10

Related

Reference