web-dev-qa-db-ja.com

値がボックスに入力されたときにCSSでテキストボックスのフォントの色を変更する

ページの検索ボックスとして機能するテキストボックスがあります。デフォルトのテキストの色が＃D6D6D0である単語「SEARCH」をフィールドに事前入力します。

CSSを使用して、誰かがボックスにテキストを入力したときにテキストの色を#FFFFFFに変更することは可能ですか？

<input type="text" name="q" value="SEARCH" id="searchFieldText">

#searchFieldText {
    background: url("/images/crmpicco/search_bg3.png") no-repeat scroll 0 0 #000000;
    border: medium none;
    color: #D6D6D0;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: 21px;
    padding-left: 0;
    padding-top: 3px;
    width: 168px;
}
htmlformscsstextbox
6
crmpicco

フォーカス疑似クラスは機能するはずです

#searchFieldText:focus {
    color: #fff;
}
8
Jrod

:focusの使用は、ボックスに現在フォーカスがある場合にのみ適用され、ユーザーがテキストボックスから出ると、色が元に戻ります。

placeholder属性を使用し、placeholderのスタイルを希望の#D6D6D0色にオーバーライドして、テキストボックスに希望のスタイルを適用することをお勧めします。

これらの疑似セレクターを使用して、placeholderスタイルをオーバーライドできます。

::-webkit-input-placeholder {
    color:    #D6D6D0;
}
:-moz-placeholder {
    color:    #D6D6D0;
}
::-moz-placeholder {
    color:    #D6D6D0;
}
:-ms-input-placeholder {
    color:    #D6D6D0;
}

私はあなたにアイデアを与えるフィドルを作りました： http://jsfiddle.net/bM5AE/

8
Marcus Recck

プレースホルダーを使用してフィールドに事前入力することをお勧めします。入力すると、フィールドが空になり、フィールドが空の場合、プレースホルダーが元に戻ります。

<input type="text" name="q" placeholder="SEARCH" id="searchFieldText">

プレースホルダーのスタイルを設定したくない場合

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;  
}
::-moz-placeholder {  /* Firefox 19+ */
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

例

4
Gijs

疑似クラスの使用:focusはあなたのためにトリックを行います。

#searchFieldText:focus{
    color:#fff;   
}

また、入力フィールドに新しい属性placeholderを使用することをお勧めします。これにより、魔法がかかります（ただし、サポートに注意する必要があります）。

例を参照

1
Christoph

こんにちは以下のコードを試してみてください。

        $(document).ready(function () {
            $("#searchFieldText").keypress(function () {
                $("#searchFieldText").css("color", "#ffffff");
            });
        });
0
Pandian