CSS3 İle Acılır Arama Kutusu

<form>

<p>
<input type="arama" placeholder="Arama">
</p>
</form>

body {
background-color: #333;
}

input {
outline: none;
}
input[type=arama] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-arama-decoration,
input::-webkit-arama-cancel-button {
display: none;
}

input[type=arama] {
background: #ededed url(images/arama-butonu.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=arama]: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);
}

input:-moz-placeholder {
color: #999;
}

input::-webkit-input-placeholder {
color: #999;
}