JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<div class="header-top-right">
    <div class="search-block">
        <form method="get" action="http://www.vesti.bg/tarsene" class="search-block-form">
            <p>
                <input type="text" name="q" value="" class="input-field search-field blur" style="">
                <input type="submit" value="" class="search-button" style="">
            </p>
        </form>
    </div>
</div>

CSS

.header-top-right{
    float: right;
    position: relative;
}

/*--------- Search Block --------- */
.search-block{
    float: left;
    margin-right: 2px;
}

.search-block-form p{
    overflow: hidden;
    height: 30px;
}

.search-field.blur{
    display: none;
    float: left;
    position: relative;
    top: 3px;
    width: 0;
    height: 22px;
    padding: 0;
    font: 13px Arial;
    color: #000;
    border: none;
    box-shadow: none;
}
.search-block .search-button{
    float: right;
    display: block;
    position: relative;
    top: 3px;
    width: 32px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    border: none;
    background: url(http://m.netinfo.bg/vesti/images/vesti-sprite_01-01.png) no-repeat -38px -2px;
}

.search-block .search-button-hover{
    background-position:-38px -32px;
}

JavaScript

$(function(){
    $('.search-block .search-button').click(function(e){
        if(!$(this).hasClass('selected')){
            e.preventDefault();
            $(this).addClass('selected');
            $('.search-field').show();
            $(this).css('background-color','#0e4674');
            $('.search-block .search-field').css('border','solid 1px #0e4674').animate({
                width: '232px',
                paddingLeft: '4px',
                paddingRight: '4px'
            },400).focus();
        }else{
            if($('.search-block .search-field').val() == ''){
                e.preventDefault();
                $(this).removeClass('selected');
                $(this).attr('style','');
                $('.search-block .search-field').attr('style','').blur();
            }
        }
    })
})