JSFiddle - React, Tailwind, and code Playground

by Yaprak Ayazoğlu

HTML

<form method="post" action="/search" >
    <span class="search-container">
        <input class="search" type="text" placeholder="Search"/>
        <button class="my-icon my-icon-search" type="submit">Go</button>
        <input class="my-icon my-icon-remove" type="reset" value="x">
    </span>
</form>

CSS

.search-container {
    position: relative;
    display: inline-block;
}

.my-icon {
    border: none;
    background-color: #ffffff;
    position: absolute;
    z-index: 2; /* Make the icon on top of the input box */
    /* vertically center the icon */
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    color: dimgray; /* Define the text color */
}

.my-icon.my-icon-search {
    right: 5px; /* Define the absolute position in the search container */
    /* Define the background image for remove button */
    background: #ffffff url(img/search.svg) no-repeat center center;
    background-size: contain;
    padding: 9px 9px; /* Define padding to make the icon more bigger */
}

.my-icon.my-icon-remove {
    display: none; /* Hide the remove button initially */
    background: #ffffff url(img/remove.svg) no-repeat center center; /* Define the background image for remove button */
    right: 35px; /* Define the absolute position in the search container */
}

input[type=text] {
    /* Give an initial width */
    width: 100px;
    /* Make the width changes more smooth */
    transition: width 1s ease;
    -webkit-transition: width 1s ease;

    /* Make the search box look fancy .*/
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

JavaScript

$(document).ready(function(){

    // If there is a text entered to the input box, reveal the remove button
    // else make keep it hidden.
    function displayReset(that) {
        // Test the length of the value of the input box
        var display = $(that).val().length > 0 ? "block" : "none";
        $(".my-icon-remove").css("display", display);
    }

    // On focusin event, increase the width of the input box
    $("input[type=text]").on("focusin", function(){
        $("input[type=text]").css("width", "250px");
        displayReset(this);
    });

    // On keydown, check whether there is text in the input box or not
    $("input[type=text]").on("keydown", function() {
        displayReset(this);
    });

    // On focus out search input box
    $("input[type=text]").on("focusout", function(event){
        var target = $(event.relatedTarget); // Get the related target of the event
        // Unless there is "my-icon" class in the relatedTarget, update the width
        if (!target.hasClass("my-icon")) {
            $("input[type=text]").css("width", "100px");
            $(".my-icon-remove").css("display", "none");
        }
    });
    
    // On focus out remove button
    $(".my-icon.my-icon-remove").on("focusout", function(event){
        var target = $(event.relatedTarget); // Get the related target of the event
        // Unless there is "my-icon" class in the relatedTarget, update the width
        if ( !target.hasClass("search") ) {
            $("input[type=text]").css("width", "100px");
            $(".my-icon-remove").css("display", "none");
        }
    });
});