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>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">How to change the color of placeholder text
What you want to use/change is the following:
input, .actual-edit-overlay {
-webkit-text-fill-color: #fff !important;
}
Change a HTML5 input's placeholder color with CSS
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder. [Ref] - Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder(one colon). [Ref] - Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder, but the old selector will still work for a while. [Ref] - Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder. [Ref] - April 2017: Most modern browsers support the simple pseudo-element
::placeholder[Ref]
Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.
CSS selectors
User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}<input placeholder="Stack Snippets are awesome!">How to style placeholder text color for individual text field?
Have you tried... CSS classes by any chance?
<input class="green" id="foo" type="text" placeholder="im green" />
<input class="red" id="foo2" type="text" placeholder="im red />
<style type="text/css">
input.green:-moz-placeholder {
color: green;
}
</style>
change placeholder text color of textarea
For modern browsers, use just the ::placeholder pseudo element:
textarea::placeholder {
color: #0bf;
}
Legacy and modern browsers:
textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* Webkit based */
textarea::placeholder { /* Modern browsers */
color: #0bf;
}<textarea placeholder="test"></textarea>Is it possible multiple text color in a single placeholder?
No, it is not possible to color the default placeholder but you can create a element similar to placeholder. So, that you can color the letters. This is a workaround to the default placeholder.
Note that I am using opacity: 0.5, you can change it as per your need.
HTML
.input-field { position: relative; display: inline-block;}.input-field > label { position: absolute; left: 0.5em; top: 50%; margin-top: -0.5em; opacity: 0.5;}.input-field > input[type=text]:focus + label { display: none;}.input-field > label > span { letter-spacing: -2px;}.first-letter { color: red;}.second-letter { color: blue;}.third-letter { color: orange;}.fourth-letter { color: green;}.fifth-letter { color: yellow;} <div class="input-field"> <input id="input-text-field" type="text"></input> <label for="input-text-field"> <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> </div>Related Topics
CSS Styles Not Applied Properly,If Use Doctype
How to Make a 45 Degree Responsive Ribbon with Folded Corner
How to Tell an HTML Element to Ignore Any Stylesheets
Download Webpage and Dependencies, Including CSS Images
Responsive Table Handling in Twitter Bootstrap
What Is The 'Lang' Attribute of The <HTML> Tag Used For
How to Place Text and an Image Next to Each Other in HTML
How to Stop <Div> Tags Interfering with Counters
Block Level Elements Inside Inline Elements
A True Sticky Footer with a Fixed Header
Links Not Going Back a Directory
Media Queries Not Working Inside an Iframe
How to Keep Styles After Animation
Applying CSS for Only Parent But Not to Children
Missalignment with Inline-Block (Other Elements Pushed Down)