搜索框

鼠标点击搜索输入框，搜索框左侧拉伸73个像素

1) Add HTML

<!--使用Bootstrap字体图标-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="serchbar">
    <form action="#" method="get">
        <div class="search-field-wrap">
            <input type="text" class="search-field" placeholder="搜索">
        </div>
        <div class="searchSelect">
            <span>&nbsp;选项</span>
        </div>
        <div class="serch-btn">
            <span class="glyphicon glyphicon-search"></span>
        </div>
    </form>
</div>

2） Add CSS

        .serchbar {
            width: 297px;
            height: 34px;
            position: absolute;
            right: 200px;
            top: 20px;
        }

        .searchSelect {
            float: right;
            width: 47px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            background-color: #fff;
            border: 1px solid #49af4f;
            border-right: none;
            cursor: pointer;
            font-size: 0.9em;
            color: #666;

        }
        .searchSelect > span:after {
            top: -2px;
            content: " \25BE";
        }

        .searchSelect:hover {
            color: #49af4f;
        }

        .search-field-wrap {
            float: right;
            width: 177px;
            height: 34px;
            transition: width 0.6s;
            border: 1px solid #49af4f;
            border-left: none;
            overflow: hidden;
        }

        .search-field {
            width: 100%;
            height: 34px;
            border: none;
            outline: none;
        }

        .serch-btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 34px;
            height: 34px;
            cursor: pointer;
            background-color: rgb(73, 175, 79);
            font-size: 20px;
            text-align: center;
            line-height: 34px;
            color: rgb(217, 241, 218);
        }
        .serch-btn:hover{
            background-color: rgb(84, 193, 90);
        }

3) Add jQuery

    $(".search-field").focus(function () {
        $(".search-field-wrap").css("width", "250px")
    })
    $(".search-field").focusout(function () {
        $(".search-field-wrap").css("width", "177px")
    })