这个怎么样

<input type=“text”value=“placeholder text”onfocus=“this.style.color='#000'；this.value=“”；“style=”颜色：#f00；" />

没有CSS或占位符，但您可以获得相同的功能。

Compass有一个开箱即用的混音器。

举个例子：

<input type="text" placeholder="Value">

在SCSS中使用指南针：

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

有关输入占位符mixin，请参阅文档。

如果您正在使用Bootstrap，但无法使其工作，那么您可能错过了Bootstrap本身添加这些选择器的事实。这是我们正在讨论的Bootstrap v3.3。

如果您试图更改.form控件CSS类中的占位符，则应按如下方式重写它：

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}

除了toscho的回答，我还注意到Chrome 9-10和Safari 5在支持CSS财产方面的一些webkit不一致，值得注意。

具体来说，Chrome 9和10在设置占位符样式时不支持背景色、边框、文本装饰和文本转换。

这里是完整的跨浏览器比较。

跨浏览器解决方案：

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

资料来源：David Walsh

现在，我们有了一种标准的方法来将CSS应用于这个CSS模块Level 4草稿中输入的占位符：：占位符伪元素。