【问题标题】：2 colors in one placeholder of input field输入字段的一个占位符中有 2 种颜色
【发布时间】：2014-07-27 00:22:21
【问题描述】：

我需要创建在占位符中有 2 种颜色的输入。

这是在 Chrome 中运行良好的解决方案。

html

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

css

.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;
}

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

铬：

FF:

【问题讨论】：

@Eugene 你测试了我的解决方案吗？发现了什么问题？

标签： html css firefox

【解决方案1】：

这是一个不使用Javascript的跨浏览器解决方案：

Live demo

input 等内联元素不支持 :before 和 :after。正如您所发现的，所有浏览器并不完全支持占位符选择器及其伪类，这让事情变得更加困难。

因此，解决方法是添加一个label，相对于输入框顶部放置一个for 属性指向输入文本框。这样，当用户点击标签（假占位符）时，焦点会进入下方的输入框。

用属性required="required" 替换您的class="required"。这使您有机会使用:invalid 和:valid 选择器，并且还让浏览器在提交表单时显示验证错误，其中必填字段为空。

input {
  width: 160px;
}

input[type=submit] {
  width: auto;
}

input[required]+label {
  color: #999;
  font-family: Arial;
  font-size: .8em;
  position: relative;
  left: -166px;
  /* the negative of the input width */
}

input[required]+label:after {
  content: '*';
  color: red;
}


/* show the placeholder when input has no content (no content = invalid) */

input[required]:invalid+label {
  display: inline-block;
}


/* hide the placeholder when input has some text typed in */

input[required]:valid+label {
  display: none;
}

<form>
  <input type="text" id="name" name="name" required="required" />
  <label for="name">Name</label>
  <br/>
  <input type="email" id="email" name="email" placeholder="Email" />
  <br/>
  <input type="submit" />
</form>

由于不需要电子邮件，因此请将本地占位符留在那里，然后就可以输入名称了。

我还将您的电子邮件从 type="text" 更改为 type="email"，以便在移动设备上获得更好的用户体验。

【讨论】：

需要的真是太棒了！！
如果我们需要多个字段jsfiddle.net/w7mc380g 仅适用于第一个输入框怎么办（隐藏标签）。有什么方法可以让这段代码适用于多个字段？
想通了。这是多个领域的工作小提琴jsfiddle.net/0j9f7pL1

【解决方案2】：

受 Jose 的解决方案启发，不使用“必需”属性，live demo 也可以做你想做的事。

关键是css有:not选择器，参考Mozilla website

【讨论】：

【解决方案3】：

同样的问题被问到here

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

:before 和:after 不能用于某些元素，例如<input>。不过，这取决于浏览器，因为似乎 chrome 可以做到。

也许可以使用 JavaScript 解决？我不知道

【讨论】：