JSFiddle - React, Tailwind, and code Playground

Add color to placeholder

by refhat

HTML

<div class="holdsname">
  <span class="holder">First name</span>
  <input id="input" size="18" type="text" />&nbsp;
</div>

CSS

div.holdsname span.holder {
position: absolute;
margin: 7px 8px;
color: #A3A3A3;
cursor: auto;
font-family: Helvetica;
font-size: 11pt;
z-index: 1;
}

div.holdsname span.active { color: red; }

div input {
    padding:5px;
    font-size:11pt;
}

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();
    });
    $("span.holder + input").focus( function() {
        $(this).prev('span.holder').addClass('active');
    }).blur(function() {
        $(this).prev('span.holder').removeClass('active');
    });
});