Simple CSS Animated Search Field

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 uses no JavaScript. Initially, it is only shown as the symbolic magnifying glass as 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, however, it will hide as soon as you move the courser out of the search field.

In this tutorial, I will show you how can you 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:

Simple CSS Animated Search Field and after hovering Simple CSS Animated Search Field

You can find the demo and download link here:

Download Demo

Share this post