two different styles per one HTML5 placeholder attribute?

Question

I currently want to simply style my asterisk within my placeholder="" copy to be red and leave the the rest of the placeholder copy my shade of blue I'm using in the below.

HTML MARK-UP:

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

CSS in which I am styling placeholder copy to be blue:

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

Any thoughts as to how to achieve this?

I would ideally not use background image, as I am already using a background image for a simple custom down arrow on select boxes, also my fields have different sizes so I really don't want to use multiple background images, but instead seeking a more global solution... Specific to still using and styling placeholder attribute.

Answer 1

Looking for something like this (demo is WebKit only): 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;
}