最近、webページ内に設置されたサーチウィンドウから検索するスタイルを良く見かけます。ページのスペースが限られている場合は、虫眼鏡などのアイコンにホバーすると、小さかったり、閉じているサーチウィンドウが開く、といったスタイルが多いようです。今回のものも同じタイプですが、違うのは、虫眼鏡のアイコンにホバーすると、虫眼鏡アイコン自身がサーチウィンドウに変わるところです。

サンプル

サンプルのhtmlソース

<div class="cntr">
    <div class="cntr-innr">
        <label class="search" for="inpt_search">
            <input id="inpt_search" type="text">
        </label>
        <p>この上の虫眼鏡アイコンにホバーすると、サーチウィンドウに変わります。</p>
    </div>
</div>

サンプルのCSSソース

.cntr {
    display: table;
    width: 100%;
    height: 100%;
    }
.cntr .cntr-innr {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }
.search {
    display: inline-block;
    position: relative;
    height: 35px;
    width: 35px;
    box-sizing: border-box;
    margin: 1px 8px 7px 0px;
    padding: 1px 5px 0px 5px;
    border: 3px solid #ffffff;
    border-radius: 25px;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    cursor: text;
    }
.search:after {
    content: "";
    position: absolute;
    width: 3px;
    height: 20px;
    right: -5px;
    top: 21px;
    background: #ffffff;
    border-radius: 3px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    }
.search.active,
.search:hover {
    width: 200px;
    margin-right: 0px;
    }
.search.active:after,
.search:hover:after {
    height: 0px;
    }
.search input {
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-family: Helvetica;
    font-size: 15px;
    color: inherit;
    background: transparent;
    outline-width: 0px;
    }