Simple CSS Animated Search Field

Being one of the prime components that define and improve your website’s user experience, the search field is surely a component you need. Since its purpose is to help the user find information quickly and easily and save them time, it is of utmost importance to give your users a search field that is highly visible yet simple and functional. If you are looking for a new, CSS animated search field made without JavaScript to replace your original one, I present you a simple, modern and highly functional search field that will allow quick site-wide navigation.

Normal search fields are either too boring or require JavaScript, while my CSS animated search field can fit into any website’s navigation menu with its beautiful icon. This search bar extends with CSS transitions and it doesn’t use JavaScript. Initially, it is only shown as the symbolic magnifying glass as an icon, but when you hover on it, it quickly extends into view and invites you to enter your search terms. If you click the search bar, it will remain open until you click out of the field. If you move the courser out of the search field without clicking it, it will immediately hide.

Tutorial for Creating an Animated Search Box in CSS

In this tutorial, I will show you how to create a really cool animated search box using CSS only – all by yourself!

This is the html structure that you need:

<form class="search-form">
    <div class="input-group search-group">
        <input type="text" class="form-control search-control" placeholder="Enter your search term...">
    </div>
</form>

and the CSS:

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    margin: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* Search */
.search-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    -moz-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -o-transform: translate(-50%);
    -ms-transform: translate(-50%);
}

.input-group.search-group {
    height: 50px;
    min-width: 50px;
    position: relative;
}

.form-control.search-control {
    background: url(http://milansavov.com/img/zoom.svg) no-repeat right 11px center / 25px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: transparent;
    font-size: 16px;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    outline: 0 none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    cursor: pointer;

    -webkit-backface-visibility: hidden;

    transition: width 0.25s;
    -moz-transition: width 0.25s;
    -webkit-transition: width 0.25s;
    -o-transition: width 0.25s;
    -ms-transition: width 0.25s;
}

.input-group .form-control:hover, 
.input-group .form-control:focus {
    padding: 10px 20px;
    width: 380px;
    color: #000;
    cursor: auto;
    background-color: #fff;
}

.input-group .form-control::-moz-placeholder {
    color: transparent;
}

.input-group .form-control::-webkit-input-placeholder {
    color: transparent;
}

.input-group .form-control:hover::-moz-placeholder,
.input-group .form-control:focus::-moz-placeholder { 
    color: #ddd;
}
.input-group .form-control:hover::-webkit-input-placeholder,
.input-group .form-control:focus::-webkit-input-placeholder { 
    color: #ddd;
}

.input-group .form-control:focus {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    border-color: #e6e6e6;
}

In the end, you should expect this results:

 and after hovering 

You can find the demo and download link here: