JSFiddle - React, Tailwind, and code Playground

by jquery4u

HTML

<link rel="stylesheet" href="http://dev.splash.abc.net.au/splash-under-water-theme/css/under_water.css">
<link rel="stylesheet" href="http://dev.splash.abc.net.au/splash-search-portlet/css/splash-search-input-portlet.css?browserId=other&amp;themeId=splashunderwater_WAR_splashunderwatertheme&amp;minifierType=css&amp;languageId=en_AU&amp;b=6120&amp;t=1365046906000">
<link rel="stylesheet" href="http://dev.splash.abc.net.au/splash-under-water-theme/css/icons.css">
<div class="portlet-boundary portlet-boundary_splashsearchinputportlet_WAR_splashsearchportlet_ portlet-static portlet-static-end splashSearchInput " id="p_p_id_splashsearchinputportlet_WAR_splashsearchportlet_"> <span id="p_splashsearchinputportlet_WAR_splashsearchportlet"></span> 
    <div class="portlet-body">
        <section class="portlet" id="portlet_splashsearchinputportlet_WAR_splashsearchportlet">
            <div class="portlet-content">
                <div class=" portlet-content-container" style="">
                    <div class="portlet-body">
                        <div class="splashSearchInputDiv">
                            <div class="ui-widget">
                                <form action="/web/splash/search" method="post" class="form-search" id="search_form">
                                    <input type="hidden" name="splashSearchURL" id="splashSearchURL" value="">
                                    <input type="hidden" name="splashSearchRealTimeSuggestionURL" id="splashSearchRealTimeSuggestionURL" value="http://localhost:8080/web/splash/home?p_p_id=splashsearchinputportlet_WAR_splashsearchportlet&amp;p_p_lifecycle=2&amp;p_p_state=normal&amp;p_p_mode=view&amp;p_p_resource_id=realTimeSuggestion&amp;p_p_cacheability=cacheLevelPage">
                                        
                                    <div class="input-group ill-input initialised">
                                        <label for="keyword">What are you looking for?</label>
                               ...

CSS

.splashSearchInput .splashSearchButton {
    vertical-align: middle;
    height: 27px;
    width: 27px;
    padding: 0;
    margin-left: -5px;
    margin-top: 1px;
    background: url("http://splash.abc.net.au/splash-under-water-theme/splash_images/buttons/icon_search.png") top left no-repeat;
}
input[type="text"], input[type="password"], input[type="file"], input[type="submit"], input[type="button"], input[type="reset"], select, textarea, .textarea, button, .aui-field-input-text {
    background-image: url(http://splash.abc.net.au/splash-search-portlet/images/forms/input_shadow.png);
    background-repeat: no-repeat;
    border: 1px solid;
    border-color: #BFBFBF #DEDEDE #DEDEDE #BFBFBF;
    font: 1em Arial, Helvetica, Verdana, sans-serif;
    padding: 5px 1px;
}



.ill-input input[type=text] {
    border:1px solid #ddd;
    border-radius:3px;
    box-shadow:0 2px 5px rgba(0, 0, 0, 0.1) inset;
    outline:none;
    -webkit-transition:.1s all;
    -moz-transition:.1s all;
    -o-transition:.1s all;
    transition:.1s all;
    padding:10px .5em;
}
.ill-input input[type=text]:focus {
    background:#fbfbfb;
    border-color:#bbb;
}
.ill-input label {
    color:#aaa;
    cursor:text;
    left:.7em;
    position:absolute;
    top:12px;
    -webkit-transition:.2s color;
    -moz-transition:.2s color;
    -o-transition:.2s color;
    transition:.2s color;
    z-index:2;
}
.ill-input {
    position:relative;
}

.ill-input input {
    position:relative;
    z-index:1;
}
.ill-input input:focus {
    z-index:3;
}
.ill-input.focused label {
    color:#ddd;
}
.ill-input.populated label {
    visibility:hidden;
}
.ill-input.initialised input:focus {
    z-index:1;
}

JavaScript

/* 
    Form Label Placeholders jQuery Plugin 
    Cross broswer SEO friendly form input placeholder alternative
    Author: Sam Deering
*/
(function($) {
    $.fn.extend({
        labelPlaceholder: function(options)
        {
            var defaults = {
                populated: "populated", //mapped to css classes to control input/label styles
                focused: "focused",
                initialised: "initialised"
            };
            var settings = $.extend({}, defaults, options);

            return $(this).each(function()
            {
                var $container = $(this), 
                $field = $container.find('input'),
                $label = $container.find('label');

                function checkField()
                {
                    $field.val() === "" ? $container.removeClass(settings.populated) : $container.addClass(settings.populated);
                    setTimeout(function()
                    {
                        checkField(); //allow time for typingcheck for typing
                    }, 100);
                }

                //events to capture user iteration with inputs
                $field.on(
                "focus", function (e) 
                {
                    $container.addClass(settings.focused);
                    checkField();
                })
                .on("blur", function (e) 
                {
                    $container.removeClass(settings.focused);
                    checkField();
                });
                
                //label click to enable input focus
                $label.on("click", function (e) 
                {
                    $field.trigger('focus');
                });

                $container.addClass(settings.initialised); //start initialised
            });
        }
    });
})(jQuery);

$(document).ready(function () {
    $(".ill-input").labelPlaceholder();
});