每个HTML5占位符属性有两种不同的样式？

Question

我目前想在我的placeholder=""副本中简单地将我的星号设为红色，并让剩下的占位符复制我的蓝色，我会在下面使用。

HTML MARK-UP：

<input type="text" name="firstname" placeholder="* First Name" required>

我将占位符副本设置为蓝色的CSS：

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

有关如何实现这一点的想法吗？

我理想情况下不使用背景图片，因为我已经在选择框上使用背景图像作为简单的自定义向下箭头，我的字段也有不同的尺寸，所以我真的不想使用多个背景图像，而是寻求更全面的解决方案......具体到仍然使用和样式placeholder属性。

Answer 1

寻找类似的东西（演示只是WebKit）：http://codepen.io/zvona/pen/wKqLOM

::-webkit-input-placeholder {
  color: #6785b2;
}

::-webkit-input-placeholder::before {
  content: '*';
  color: #FF8F20;
  font-size: 20px;
  float: left;
  margin-right: 0.25em;
}