2 Colors in One Placeholder of Input Field

Apply multiple styles to a single placeholder in an input element

The only solution i see is to avoid the use of placeholder and replace its behaviour with javascript. The old-style way!

See this demo

HTML

<div class="location">
    <span class="holder">Location <span class="blue">or</span> Place</span>
  <input id="input" size="18" type="text" /> 
</div>

Javascript

$(function() {
    $("span.holder + input").keyup(function() {
        if($(this).val().length) {
            $(this).prev('span.holder').hide();
        } else {
            $(this).prev('span.holder').show();
        }
    });
    $("span.holder").click(function() {
        $(this).next().focus();
    });
});

CSS

div.location > span.holder {
position: absolute;
margin: 5px 8px;
color: #ddd;
cursor: auto;
font-family: Helvetica;
font-size: 11pt;
z-index: 1;
}

div.location > span.holder > span.blue{
    color: #819FF7;
}

div input {
    padding:5px;
    font-size:11pt;
    background-color: #0B7DAB;
    color: white;
     border-radius:15px;
     -moz-border-radius:15px;
     -webkit-border-radius:15px;
    border: none;
}

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">

How to add different placeholder color

you need to be more specified:

if you put ::-webkit-input-placeholder in the CSS, you will select all placeholders... but this is not what we want

so using :nth-of-type(); a pseudo-class, you can select the wanted one, easily.

useful documentations:

• nth-of-type MDN documentation

so the code will be like this:

/* 1 */

input:nth-of-type(1)::-webkit-input-placeholder {
  color: green;
}

/* 2 */

input:nth-of-type(2)::-webkit-input-placeholder {
  color: blue;
}

/* 3 */

input:nth-of-type(3)::-webkit-input-placeholder {
  color: red;
}

<!-- 1 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 2 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 3 -->
<input type="text" name="" id="" placeholder="hello world">

Multiple styles for input placeholder text

You have to combine the class with the pseudo element, and then you can apply a class to the input elements:

input::-webkit-input-placeholder { font-size: 16pt; color: #555; }input::-moz-placeholder { font-size: 16pt; color: #555; }input:-ms-input-placeholder { font-size: 16pt; color: #555; }input:-moz-placeholder { font-size: 16pt; color: #555; }
input.other::-webkit-input-placeholder { font-size: 12pt; color: red; }input.other::-moz-placeholder { font-size: 12pt; color: red; }input.other:-ms-input-placeholder { font-size: 12pt; color: red; }input.other:-moz-placeholder { font-size: 12pt; color: red; }

<input type="text" placeholder="Hello"></input><input type="text" class="other" placeholder="Hello"></input>

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>

Related Topics