0

テキストボックスのCSSスタイルをいくつか作成しました。

<div style="margin:10px">
<input type="text" value="Username" class="textbox3" onfocus="if(this.value=='Username')this.value=''" onblur="if(this.value=='')this.value='Username'">
</div>​​​​​​

とCSS

.textbox3{
    color:#202020;
    padding:0 5px 0 10px;
    font-family: 'Source Sans Pro', sans-serif;
    height:30px;
    font-size:13px;
    margin:0;
    outline:none;
    border:1px solid #dbdbdb;
    border-radius:3px;
    width: 150px;
}
.textbox3:focus{
    color:#202020;
    border:1px solid #4e8abf;
}
.textbox3:focus, .textbox3{
 -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}​

Jsfiddle： http: //jsfiddle.net/AWmUg/

ただし、テキストのデフォルトの色は濃い灰色です。このデフォルトのテキスト「ユーザー名」の色を、＃cdcdcdのようにもっと明るい色に変更したかったのですが、他のテキストを入力すると、濃い灰色になります。どうすればこの結果を得ることができますか？

4

3 に答える 3

3

代わりにHTML5の新しいplaceholder属性を使用し、独自のスタイルを使用して、プレースホルダーの色を変えたり、フォーカスのオンとオフを変えたりします。

デモ

HTML

<input type="text" placeholder="Demo" />

CSS

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ff0000;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ff0000;
}

input:-ms-input-placeholder {
  color: #ff0000;
}
于 2012-12-18T14:18:17.567 に答える
1

placeholderHTML5属性を使用して、同様の効果を得ることができます。

<input type="text" placeholder="Username"/>

このフィドルで実際の動作を確認してください：jsfiddle.net/3PLRA

ブラウザがHTML5をサポートしていない場合に、JSフォールバックメカニズムを提供する方法など、この属性に関する多くのリソースがあります。

placeholderたとえば、属性のスタイルを設定するには、CSSを使用して入力のHTML5プレースホルダーの色を変更するをご覧ください。

.textbox3::-webkit-input-placeholder {
    color:    #F00;
}
.textbox3:-moz-placeholder {
    color:    #F00;
}
.textbox3:-ms-input-placeholder {
    color:    #F00;
}

このフィドルの例を参照してください

于 2012-12-18T14:16:41.190 に答える
0

HTML5を使用すると、placeholder属性を使用できます

詳細については、 http：//www.w3schools.com/tags/att_input_placeholder.aspを参照してください。

HTML5をサポートするブラウザがこれを行います。

于 2012-12-18T14:16:40.380 に答える