JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<input type="text" placeholder="the placeholder">

CSS

::-webkit-input-placeholder {
   opacity: 1;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    transition: opacity 250ms;
    position: absolute;
    left: 5px;
    top: 2px;
    font-size: 12px;
    color: red;
}

:-moz-placeholder { /* Firefox 18- */
   opacity: 1;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    transition: opacity 250ms;
    position: absolute;
    left: 5px;
    top: 2px;
    font-size: 12px;
    color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   opacity: 1;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    transition: opacity 250ms;
    position: absolute;
    left: 5px;
    top: 2px;
    font-size: 12px;
    color: red; 
}

:-ms-input-placeholder {  
   opacity: 1;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    transition: opacity 250ms;
    position: absolute;
    left: 5px;
    top: 2px;
    font-size: 12px;
    color: red;
}

JavaScript

$("input[placeholder]").keyup(function () {
    
    var $input = $(this);
    // toogle hidden class on span, according to whether there is content or not
    if ($input.val() === "") {
        $input.next("span").removeClass("hidden");
    } else {
        $input.next("span").addClass("hidden");
    }
});