JSFiddle - React, Tailwind, and code Playground

by Khalil Zhang

HTML

<form>
    <fieldset class="off">
        <legend id="legend-for-name"></legend>
        <label id="label-for-name" for="name">name:</label>
        <input id="name" type="text" placeholder=" placeholder for name " />
    </fieldset>
</form>

CSS

fieldset.off {
    border:none;
}
fieldset.on {
    border:2px groove threedface;
}

JavaScript

function on(ele, type, handler) {
    if (ele.attachEvent) {
        ele.attachEvent('on' + type, handler);
    } else {
        ele.addEventListener(type, handler, false);
    }
}

var name = document.getElementById('name');
var label = document.getElementById('label-for-name');
var legend = document.getElementById('legend-for-name');
on(name, 'focus', function (event) {
    var placeHolderText = this.getAttribute('placeholder') || " default placeholder text ";
    label.style.display = 'none';
    legend.innerHTML = placeHolderText;
    this.parentNode.className = 'on';
});

on(name, 'blur', function (event) {
    label.style.display = '';
    legend.innerHTML = '';
    this.parentNode.className = 'off';
});