CODEWITHSUNDEEP
htmlcssplaceholder
Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

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

Upvotes: 4

Views: 3290

Answers (3)

Balaji Devrao
Balaji Devrao

Reputation: 1

Hi friends you should us div tag with an attribute of contenteditable="true" instead of input tag and then find its children elements and change their size color etc using javascript.and I think it is the only answer for your question.And if you only want to change the first letter or word color you should use pseudo selectors.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

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>

Upvotes: 3

Pushpendra
Pushpendra

Reputation: 1712

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

Upvotes: 2

Related Questions