When your website means business.

CSS3, Search, WP/CP | Type: CSSHTML5 Toggle Search

First, add HTML5 support to functions.php:
add_theme_support('html5', array('search-form'));

HTML(if HTML5 support)

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search</span>
        <input type="search" class="search-field" placeholder="Use enter key to search" value="" name="s" title="Search" />
    </label>
    <input type="submit" class="search-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

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept