Search Form css3

HTML

<form>
    <input type="search" placeholder="+Search">
</form>

CSS

input[type=search] {
    
    font-family: inherit;
    font-size: 10%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}
input[type=search]{
    background:#ededed;
    border:solid 1px #ccc;
    padding: 9px 10px 9px 32px;
    width: 55px; /*default width*/
    
    -webkit-border-radius: 10em;
    -moz-border-radius: 10me;
    border-radius: 10em;
    
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

input[type=search]:focus{
    width:130px;
    background-color:#fff;
    border-color:#6dcff6;
    
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
}