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;

Possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) — emerson.marini, May 23 '16 at 14:17
@MelanciaUK , thanks but no, i want to point to a specific part of text in the placeholder not the whole placeholder text. — Ylama, May 23 '16 at 14:36

score 3 · Answer 1 · answered May 23 '16 at 14:21

3

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/

answered May 23 '16 at 14:21

Robbin van der Jagt

796
4
15

i feel like i need to better explain the situation, i have a field as a
tag and within that is my tag with an placeholder="New Password (leave blank to leave unchanged)" . I want only the part in brackets to change color. meaning my form should stay in place, im only focused on one of these tags but there is allot of them i want to change. So changing the format of one is not helping.
– Ylama May 23 '16 at 14:58
Look at me fiddle again, I changed it up a little. Isn't this what you were looking for? 'new password' is still gray, while the longer text is transformed into blue. – Robbin van der Jagt May 23 '16 at 15:04
it places the text outside of the form so its not helping me at all, i need a input field that has a placeholder. That placeholder has a default value eg. "this is random text(this random text i want to change the color)" but before you type your name into the field you see the placeholder text within that field and this placeholder text i want to change the color of but just the part in brackets.. – Ylama May 23 '16 at 15:11

score 2 · Answer 2 · answered May 23 '16 at 15:19

2

What you want is not possible. A placeholder is a short text within a field with a different function then a hover or a label, see: https://html.spec.whatwg.org/multipage/forms.html#the-placeholder-attribute.

It is not intended to be long, hence your text is already not what a placeholder is expected to be. It is like you want to use the placeholder as a tooltip.

answered May 23 '16 at 15:19

Loek Bergman

2,192
20
18

thanks for the solid answer , i did some research and i was in doubt if this is possible looking at all the answers, so i believe you and thanks for the explanation. Much appreciated. – Ylama May 23 '16 at 15:28

G-Cyrillus · Accepted Answer · 2016-05-23T15:46:58.937

There could be a solution via mix-blend-mode.

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

http://caniuse.com/#search=mix-blend-mode

It will not be avalaible everywhere and requires some tuning.

example:

label {
  display: inline-block;
  background: linear-gradient(to right, red 8em, blue 5em);
  border: inset;/* border here instead input */
  font-family: monospace;/* less surprise about length of text at screen */
}
input {
  font-weight: bold;
  width: 25em;
  border: none;
  display: block;
  box-shadow: inset 0 0 0 2em white;/* covers the background, needed for the blending */
}
input:invalid {/* color part of text only when placeholder is shown */
  mix-blend-mode: screen;
}

<label>
  <input placeholder="New Password (leave blank to leave unchanged)" required />
</label>

DEMO

Change a part of the text placeholders color

3 Answers3

Linked