First, add HTML5 support to functions.php:
add_theme_support('html5', array('search-form'));
HTML(if HTML5 support)
<form class="search-form" role="search" action="<?php echo home_url( '/' ); ?>" method="get"> <label> <span class="screen-reader-text">Search</span> <input class="search-field" title="Search" name="s" type="search" value="" placeholder="Use enter key to search"> </label> <input class="search-submit" type="submit" value="Search"></form>
CSS
.site-header .search-form { position: absolute; right: 200px; top: 200px; }
.site-header .search-field { background-color: transparent; background-image: url(images/search-icon.png); background-position: 5px center; background-repeat: no-repeat; background-size: 24px 24px; border: none; cursor: pointer; height: 37px; margin: 3px 0; padding: 0 0 0 34px; position: relative; -webkit-transition: width 400ms ease, background 400ms ease; transition: width 400ms ease, background 400ms ease; width: 0; }
.site-header .search-field:focus { background-color: #fff; border: 2px solid #c3c0ab; cursor: text; outline: 0; width: 230px; }
.search-form .search-submit { display:none; }
Reference Links
http://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/
