<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>kervanlar.net sitene hareketli arama butonu</title> <link rel="stylesheet" type="text/css" href="style.css">     <form>     <input placeholder="Arama yap" type="search">     </form>

 input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none;  } input:-moz-placeholder { color: #999; } input::-webkit-input-placeholder { color: #999; } input[type=search] { background: #ededed url(images/ara.jpg) no-repeat 9px center;  border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 55px; /* Arama Kutusunun ilk boyutu*/   -webkit-border-radius: 10em; -moz-border-radius: 10em; border-radius: 10em;   -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 180px; /* Arama Kutusuna tikladiginizda olusacak boyut*/ 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); }