Styling part of the text in the placeholder

Question

I would like to modify the css style of a part of placeholder. Attention not all the placeholder.

If my placeholder is: \"Wher

Answer 1

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.

Answer 2

Yes (ish)... but I wouldn't recommend it.

In some browsers you can use the :before pseudo element on the placeholder and style that separately but you'll have to make the 'Search' prefix part of the pseudo element rather than in the actual placeholder attribute:

::-webkit-input-placeholder {
   color: #ABABAB;
   font-style: italic;
}
:-moz-placeholder { /* Firefox 18- */
   color: #ABABAB;
   font-style: italic;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #ABABAB;
   font-style: italic;
}
:-ms-input-placeholder {  
   color: #ABABAB;
   font-style: italic;
}
/* prepend the 'Search' prefix */
::-webkit-input-placeholder:before {
    content: "Search ";
    font-style: normal;  
}
:-moz-placeholder:before {
    content: "Search ";
    font-style: normal;  
}
::-moz-placeholder:before {
    content: "Search ";
    font-style: normal;  
}
:-ms-input-placeholder:before {
    content: "Search ";
    font-style: normal;  
}

<textarea placeholder="(example: brown fox)" required="required"></textarea>

Works for me in Chrome but your mileage may vary. I've added the vendor-prefixes just in case but I've not tested it in anything else. As noted in the comments - it doesn't work in Firefox, and probably shouldn't work anywhere! Furthermore, it is considered bad-form to style the placeholders this way as they are not really presentational elements but just kind of helpers to inform users of what's expected.

A better solution would be to NOT style the placeholders at all aside from giving them a font/colour to suit your theme.

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder.

A good form will use label, placeholder and title in combination to clearly describe the expected input. Modern browsers will also use the title attribute's value in the required field dialogue when you try to submit an invalid required field. Try this example:

<form>
    <label>Search:
        <input name="searchterms" 
               type="search" 
               placeholder="keyword/s" 
               required="required" 
               title="Space-separated keywords only" />
    </label>
    <input type="submit" value="go" />
</form>