Html 输入字段的一个占位符中有2种颜色

我需要创建一个占位符中有两种颜色的输入

这是一种在Chrome上运行良好的解决方案

html 但是我当前的FF 29.0.1没有显示from:after的内容，所以这个解决方案不起作用。有没有其他方法可以通过css和html在一个占位符中获得两种颜色

铬：

FF: 同样的问题也被问到了

基本上答案是否定的。这取决于浏览器

：before

和

：after

不能用于某些元素，例如

。不过这取决于浏览器，因为chrome似乎可以做到这一点

---

也许可以用JavaScript解决这个问题？我不知道这里有一个不使用Javascript的跨浏览器解决方案：

诸如

input

之类的内联元素不支持

：before

和

：after

。您发现，并非所有浏览器都完全支持占位符选择器及其伪类

因此，解决方法是添加一个相对放置在输入框顶部的

标签

，其

for

属性指向输入文本框。这样，当用户单击标签（假占位符）时，焦点进入下面的输入框

将您的

class=“required”

替换为属性

required=“required”

。这使您有机会使用和选择器，并且在提交带有空必填字段的表单时，浏览器也可以显示验证错误

输入{
宽度：160px；
}
输入[类型=提交]{
宽度：自动；
}
输入[必需]+标签{
颜色：#999；
字体系列：Arial；
字体大小：.8em；
位置：相对位置；
左：-166px；
/*输入宽度的负数*/
}
输入[必需]+标签：之后{
内容：“*”；
颜色：红色；
}
/*当输入没有内容时显示占位符（无内容=无效）*/
输入[必需]：无效+标签{
显示：内联块；
}
/*当输入中键入了一些文本时隐藏占位符*/
输入[必需]：有效+标签{
显示：无；
}

名称

受Jose解决方案的启发，无需使用“required”属性，也可以做您想做的事情

---

关键点是css有

：不是

选择器，请参考

@Eugene您测试了我的解决方案吗？发现了一些问题吗？这是一个多么大的必要用途！！如果我们在多个字段中需要它（隐藏标签），则只在第一个输入框中使用。有没有办法让这段代码在多个字段中工作？我想出来了。这里是多个领域的工作小提琴

<input placeholder="Name" class="required" />

.required::-webkit-input-placeholder:after {
    content:'*';
    color: red;
}
.required:-moz-placeholder:after {
    /* Firefox 18- */
    content:'*';
    color: red;
}
.required::-moz-placeholder:after {
    /* Firefox 19+ */
    content:'*';
    color: red;
}
.required:-ms-input-placeholder:after {
    content:'*';
    color: red;
}