Change a part of the text placeholders color

Question

I have a text 'placeholder' which is equal to "New Password (leave blank to leave unchanged)". I want only the part in brackets to change of color, meaning 'New Password' will stay red and the sentence in brackets would change to blue in this case.

Any help?

Code:

<input type="password" class="input-text" name="password_1" id="password_1" placeholder="New Password (leave blank to leave unchanged)">

Css: (this does change the whole placeholder text sentence)

input[type="text" i].form-row::-webkit-input-placeholder {
    color: #757575;
}

So as final answer the placeholder="New Password (leave blank to leave unchanged)" part will change to =

New Password - color: red;

(leave blank to leave unchanged) - color: blue;

Answer 1

I've found this fiddle that could do the trick for you. It does require you to change the way you've set up your placeholder, since for now there isn't a way to color partial parts of the placeholder attribute.

What you basicly do is create an effect of a placeholder, without it actually being one.

.placeholder-wrap input:focus + .placeholder {
    display: none;
}

The part above will help you making the 'placeholder' disappear when an user has clicked the input field.

<div class="placeholder-wrap">
    <input type="text" name="userName" />
    <span class="placeholder">
        This is a <b class="important">placeholder</b> long text goes here
    </span>
</div>

http://jsfiddle.net/dfsq/xD5Lq/