2 colors in one placeholder of input field

Question

I need create input which has 2 colors in a placeholder.

and here is solution which works well in Chrome.

http://jsfiddle.net/vmuJm/

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

But my current FF 29.0.1 doesn't show content from :after, so this solution doesn't work. Is there any other way to get 2 colors in one placeholder with css and html?

Chrome:

FF:

Answer 1

Here is a cross-browser solution that does not use Javascript:

Live demo

Inline elements such input do not support :before and :after. To make things even harder the placeholder selector and their pseudo-classes are not fully supported by all browsers, as you found out.

So, the workaround is to add a label placed relatively on top of the input box with a for attribute pointing to the input text box. This way, when user clicks the label (fake placeholder) the focus goes into the input box underneath.

Replace your class="required" by the attribute required="required". This gives you an opportunity to use the :invalid and :valid selectors, and also lets the browser display a validation error, when the form is submitted with empty required fields.

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>

Since the email is not required, leave the native placeholder there, and just to this hack for the name.

I also changed your email from type="text" to type="email" for better user experience on mobile devices.

Answer 2

Inspired by Jose's solution, without using "required" attribute, the live demo also can do what you want.

Key point is css has :not selector, refer to Mozilla website