CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Subhajit Panja
Subhajit Panja

Reputation: 1240

Is it possible multiple text color in a single placeholder?

I want a placeholder with multiple color text.Is it possible please help me.

I have a input text filed where placeholder showing I'm a good boy. I want good word different in color.

Upvotes: 1

Views: 4766

Answers (2)

Mr_Green
Mr_Green

Reputation: 41832

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>

Working Fiddle

Updated:

Only CSS (with :placeholder-shown)

The above fiddle has a bug which is when you type something in the textbox and click outside, the placeholder is visible again above the entered text.

So, to make it perfect, we can use :placeholder-shown which hasn't have much support yet other than chrome and firefox.

Here is the code:

.input-field {
  position: relative;
  display: inline-block;
}

.input-field > label {
  position: absolute;
  left: 0.5em;
  top: 50%;
  margin-top: -0.5em;
  opacity: 0.5;
  display: none;
}

.input-field > input[type=text]:placeholder-shown + label {
  display: block;
}

.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" placeholder=" "></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>

Working Fiddle

Using JS (without :placeholder-shown):

addListenerMulti(document.getElementById('input-text-field'), 'focus keyup', blurme);

function blurme(e) {
  var element = e.currentTarget;
  element.classList[(element.value.length !== 0) ? "add" : "remove"]('hide-placeholder');
}

function addListenerMulti(el, s, fn) {
  s.split(" ").forEach(function(e) {
    return el.addEventListener(e, fn, false)
  });
}
.input-field {
  position: relative;
  display: inline-block;
}
.input-field > label {
  position: absolute;
  left: 0.5em;
  top: 50%;
  margin-top: -0.5em;
  opacity: 0.5;
}
.hide-placeholder + 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>

Working Fiddle

Upvotes: 7

G-Cyrillus
G-Cyrillus

Reputation: 105853

CSS could help you (not IE yet). mix-blend-mode + gradient and background dispatch in 2 containers.

i used required (attribute) and :invalid (CSS) to trigger effect only when placeholder is shown.

For info , take a look at :

Example (for browser that deals with mix-blend-mode)

input {
  font-family:monospace;
  vertical-align:middle;  
  font-size:2em;
}
input:invalid {
  mix-blend-mode:screen;
  text-shadow:0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black; /* increase visibility */
}
label {
  background:repeating-linear-gradient(to right, 
    pink 10%,
    blue 10%,
    blue 20%,
    purple 20%,
    purple 30%,
    red 30%,
    red 40%,
    green 40%,
    green 50%,
    turquoise 50%,
    turquoise 60%)
  left  ;
  background-size: 10em 400px;
}
<form>
<label><input type="text" required placeholder="show me colors"/></label>
</form>
supposed to be showing if mix-blend-mode implemented another example with image backgrounds and gradients still in use : http://codepen.io/gc-nomade/pen/WwgzVv

Upvotes: 0

Related Questions