How to Style Individual Parts of an Input Placeholder

How can I style individual parts of an input placeholder?

You can't do that with standard placeholder attribute. I will elaborate on another approach, making custom placeholder with some wrapper around input element.

HTML

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

CSS:

.placeholder-wrap {
    margin: 20px;
    display: inline-block;
    position: relative;
    background: #FFF;
}
.placeholder-wrap .placeholder {
    position: absolute;
    top: 50%;
    left: 5px;
    color: #888;
    margin-top: -.5em;
    line-height: 1em;
    z-index: 9;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}
.placeholder-wrap input {
    background-color: transparent;
    border: 1px #999 solid;
    padding: 4px 6px;
    position: relative;
    z-index: 10;
}
.placeholder-wrap input:focus + .placeholder {
    display: none;
}

Yes, quite a few code, but gives you some flexibility with styling.

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

UPD. There is however a problem (thanks @AlexG for reporting). Once the value is entered and the input loses focus, placeholder appears again on top of the value. There are two ways to address this issue. The first one is pure CSS again using :invalid pseudo-class, which would also need required attribute on input:

.placeholder-wrap {    display: inline-block;    position: relative;    background: #FFF;    overflow: hidden;}.placeholder-wrap .placeholder {    position: absolute;    top: 50%;    left: 5px;    color: #888;    margin-top: -.5em;    line-height: 1em;    z-index: 9;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    width: 100%;}.placeholder-wrap input {    background-color: transparent;    border: 1px #999 solid;    padding: 4px 6px;    position: relative;    z-index: 10;}.placeholder-wrap input:focus + .placeholder,.placeholder-wrap input[required]:valid + .placeholder,.placeholder-wrap input.not-empty + .placeholder {    display: none;}

input {width: 300px;}.important {color: brown;}

<p>CSS fix</p>
<div class="placeholder-wrap">    <input type="text" name="userName" required />    <span class="placeholder">        This is a <b class="important">placeholder</b> long text goes here    </span></div>
<p>Javascript fix</p>
<div class="placeholder-wrap">    <input type="text" name="userName"            onchange="this.className = this.value              ? this.className + ' not-empty'             : this.className.replace(/\bnot-empty\b/, '')"     />    <span class="placeholder">        This is a <b class="important">placeholder</b> long text goes here    </span></div>

Change color for one part of placeholder

You can do it like this:

<input type="email" placeholder="Retype email:" id="email">


#email {
   width: 95%;
   border: 1px solid black;
   font-size: 1.15em;
}

#email::-webkit-input-placeholder:after {
   content:"*";
   color:red;
   font-size:1.15em;
}

#email::-moz-placeholder:after {
     content:"*";
     color:red;
     font-size:1.15em;
 }
 #email:-ms-input-placeholder:after {     
     content:"*";
     color:red;
     font-size:1.15em;
}

Check the snippet below:

#email {  width: 95%;  border: 1px solid black;  font-size: 1.15em;}#email::-webkit-input-placeholder:after {  content: "*";  color: red;  font-size: 1.15em;}#email::-moz-placeholder:after {  content: "*";  color: red;  font-size: 1.15em;}

<input type="email" placeholder="Retype email:" id="email">

Change a part of the text placeholders color

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>

Styling part of the text in the placeholder

You may want to think about what the role and meaning of placeholders is. Most UI experts agree: placeholders are not labels. Labels (like "Search") are labels, and should be outside the text area. The placeholder is designed to be a sample input, or a format, not a label, nor instructions. To the extent that you use the placeholder in label-like fashion, that information will disappear as soon as the user starts typing.

For instance, in an input field for a phone number, the label would be "Phone Number", and the placeholder might be "212-555-1234". In your case, "Search" should be the label, and "brown fox" the placeholder. If you want to make that entire placeholder italics (but why?), you can do that easily enough with the placeholder pseudo-elements.

Is it possible to have multiple text styling for an Input element's placeholder?

I think there is no pure CSS solution for that (maybe combine ::first-letter and ::placeholder?) but here is the Solution of PressTigers:

$(document).ready(function(){ $('.input-required input').on('focus',function(){  if(!$(this).parent('.input-required').find('label').hasClass('hide')){                        $(this).parent('.input-required').find('label').addClass('hide');                        } });            $('.input-required input').on('blur',function(){  if($(this).val() == '' && $(this).parent('.input-required').find('label').hasClass('hide')){                        $(this).parent('.input-required').find('label').removeClass('hide');                    }             });});

.input-required {  position: relative;}.input-required > label {  position: absolute;  left: 10px;  top: 50%;  margin: -0.6em 0 0;  font-weight: 300;}.input-required .hide {  display: none;}.first-letter {  color: #6b6b6b;}.second-letter {  color: red;}.third-letter {  color: black;}.fourth-letter {  color: blue;}.fifth-letter {  color: brown;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="input-required"> <label>             <span class="first-letter">Password</span>                          <span class="second-letter">*</span>            </label>            <input type="password" id="password" name="password" class="input-text"> </div><div class="input-required"> <label>             <span class="first-letter">H</span>                          <span class="second-letter">e</span>                        <span class="third-letter">l</span>                        <span class="fourth-letter">l</span>                        <span class="fifth-letter">o</span>             </label> <input type="text" id="hello" name="Hello" class="input-text"></div>

how to change the placeholder text color in two different areas (div)in a web page

try this code

.fname::-webkit-input-placeholder {  color: red}

<div class="content">  <input type="text" name="firstname" class="fname" placeholder="placeholder"></div><input type="text" name="lastname" class="lname" placeholder="placeholder">

Is there any way to change one word color of placeholder

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>

Different colors in placeholder

The appearance of the placeholder property of <input> elements is managed by the browser and it cannot be separated into two separate elements, which styling just the asterisk would require, nor can it be easily styled as such.

If you wanted to accomplish this, you would likely need to use something to explicitly override the element with a <div> that contained your <span>Name</span><span style='color:red'>*</span> content to overlay on your <input> element itself similar to the scenario mentioned in this related discussion :

.input-placeholder {  position: relative;}.input-placeholder input {  padding: 2px;}.input-placeholder input:valid + .placeholder {  display: none;}.placeholder {  position: absolute;  pointer-events: none;  top: 2px;  bottom: 2px;  left: 6px;  margin: auto;  color: #ccc;}.placeholder span {  color: red;}

    <div class="input-placeholder">        <input type="text" required>        <div class="placeholder">            Name<span>*</span>        </div></div>