CSS搜索框

源码：
<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            header {
                font-family: helvetica, arial, sans-serif;
                display: block;
                overflow: hidden;
                 500px;
                margin: 30px;
                border-radius: 6px;
                background-color: #C0A4FA;
            }
            form.stylin_form_search {
                float: right;
                 200px;
                margin: 5px;
                padding: 5px;
            }
            form.stylin_form_search input {
                float: right;
                 70px;
                padding: 4px;
                outline: none;
                font-size: .8em;
                border-color: #eee #ccc #eee #ccc;
                border-radius: 10px;
                transition: 1s width;
            }
            form.stylin_form_search input:focus {
                 200px;
            }
            form.stylin_form_search label {
                display: none;
            }
        </style>
    </head>
    <body>
        <header>
            <form class="stylin_form_search" action="#" method="post">
                <label for="search">search</label>
                <input type="search" id="search" name="search" placeholder="search">
            </form>
        </header>
    </body>
</html>