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

placeholder您可以使用 HTML5属性实现类似的效果：

<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 回答