JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<form action="" method="post" id="searchForm" class="form">
        <div class="formFiled clearfix">
            <input type="text"  class="inputText search" placeholder="Enter your keyword,please!" name="search"/>
            <input type="submit" class="btn submit"  value="Search"/>
        </div>        
    </form>
    <div class="" style="height:20px"></div>
    <form action="" method="post" id="searchWrap" class="form">
        <div class="formFiled clearfix">
            <input type="text"  class="inputText search" placeholder="Search ..." name="search"/>
            <input type="submit" class="btn submit"  value="GO"/>
        </div>
    </form>
    <div style="height: 20px;"></div>
    <form action="" method="post" id="searchBox" class="form">
        <div class="formFiled clearfix">
            <input type="text" id="search" class="inputText search" placeholder="Search ..." name="search"/>
            <input type="submit"  class="btn submit" value="Search"/>
        </div>
    </form>

<script type="text/javascript" src="http://www.red-team-design.com/wp-content/uploads/2011/02/modernizr-1.6.min_.js"></script>

CSS

*{
        margin: 0;
        padding: 0;
    }
    body {
        padding: 20px 100px;
    }
    
    input[type=submit].btn::-moz-focus-inner {
        padding: 0;
        border: 0;
    }
    
    .clearfix:before, 
    .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
            overflow: hidden;
    }
    .clearfix {
        zoom:1;
    }
    
    #searchForm{
        background-color:#f2f3f1;
        background-image:-webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#f2f3f1));
        background-image:-webkit-linear-gradient(top,#fafafa,#f2f3f1);
        background-image:-moz-linear-gradient(top,#fafafa,#f2f3f1);
        background-image:-ms-linear-gradient(top,#fafafa,#f2f3f1);
        background-image:-o-linear-gradient(top,#fafafa,#f2f3f1);
        background-image:linear-gradient(top,#fafafa,#f2f3f1);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fafafa, endColorstr=#f2f3f1);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#fafafa, endColorstr=#f2f3f1)";
        -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
        -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
        box-shadow:0 1px 2px rgba(0,0,0,.4);
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        position:relative;
        display: inline-block;
        zoom: 1; /* ie7 hack for display:inline-block */
        *display: inline;
        padding:12px;
    }
    
    #searchForm:before{
        content:'';
        background:rgba(0,0,0,.07);
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        border-radius:10px;
        -webkit-box-shadow:0 1px 1px rgba(0,0,0,.4) inset,0 1px 0 rgba(255,255,255,.7);
        -moz-box-shadow:0 1px 1px rgba(0,0,0,.4) inset,0 1px 0 rgba(255,255,255,.7);
       ...

JavaScript

$(function(){
            if(!Modernizr.input.placeholder) {
                var search = $("input.search");
                var placeholderText = search.attr("placeholder");
                search.attr("value",placeholderText);
                search.addClass("placeholder");
                
                search.focus(function(){
                    if($(this).val() == placeholderText) {
                        $(this).attr("value","");
                        $(this).removeClass("placeholder");
                    }
                });
                
                search.blur(function(){
                    if(($(this).val() == placeholderText) || (($(this).val() == ""))) {
                        $(this).attr("value","");
                        $(this).removeClass("placeholder");
                    }
                });
            }
        });