<p>动态搜索框:</p>

​

<form>

  <input type="text" name="search" placeholder="搜索..">

</form>

input[type=text] {

    width: 130px;

    box-sizing: border-box;

    border: 2px solid #ccc;

    border-radius: 4px;

    font-size: 16px;

    background-color: white;

    background-image: url('searchicon.png');

    background-position: 10px 10px; 

    background-repeat: no-repeat;

    padding: 12px 20px 12px 40px;

    -webkit-transition: width 0.4s ease-in-out;

    transition: width 0.4s ease-in-out;

}

​

input[type=text]:focus {

    width: 100%;

}