Is there any way to change one word color of placeholder
Suppose i have this text field
<input type="text" placeholder="I am placeholder">
I know with css we can change placeholder color like this but is there any way to change color of one word only.
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
This code will change complete placeholder color but i want to change color of word placeholder
only instead on complete I am placeholder
Solution 1:
You can take a look at mix-blend-mode :
edit: for nowdays, see and use update below (3rd snippet) with background-clip
.
label {
display: inline-block;
background: linear-gradient(to right, red 2.2em, blue 2.2em);
border: inset;
/* border here instead input */
font-family: monospace;
/* less surprise about length of text at screen */
}
input {
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;
}
/* snippet disclaimer */
.disclaim {
mix-blend-mode: screen;
}
body {
background: white;
}
<label>
<input placeholder="I am placeholder" required />
</label>
<p class="disclaim">not avalaible yet for <span>'your browser',</span> please be patient.</p>
Else you need to use HTML and text:
label {
display: inline-block;
}
label>span {
position: absolute;
padding-left: 3px;
}
label>span span {
color: blue
}
input {
position: relative;
background: white;
}
input:invalid {
background: none;
}
<label>
<span>I am <span>placeholder</span></span>
<input type="text" required />
</label>
edit 2020
background-clip
is now well supported and can be used instead mix-blend-mode
mix-blend-mod
trick was a workaround for Firefoxe. Firefoxe understood color:transparent
but not background-clip-text;
yet ... text was gone.
label {
display: inline-block;
font-family: monospace;
/* less surprise about length of text at screen */
}
input:invalid {
background: linear-gradient(to right, red 2.2em, blue 2.2em);
background-clip:text;
color:transparent;
}
<label>
<input placeholder="I am placeholder" required />
</label>
Solution 2:
You can't possibly do it with standard placeholder. Instead make a div
and put your input element and one more child(say span/p
element) inside this div
and position span/p
inside your input element and on focus hide the span/p
element.
Something like this : link