Código de caixa de pesquisa para blogs e sites - Modelo 02

<style>#search { float:right; height: 30px; margin:10px 0 0 0; } #search input.field { font-family: "Arial","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-position:top right; background-repeat:no-repeat; width: 130px; padding:7px; outline: none; font-size: 13px; border: none; z-index: 1; height:16px; float:left; padding-right:30px; } #search input.field:focus { background-position:top right; background-repeat:no-repeat; } #search input.submit { width:auto; height:30px; font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px; } #search input.field { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRYsnCWkqqZ8UbScZqvnJ6uib3FHPXu7Rrka9StFlc968PEQK74bXkKtgi2dcEROruoQ9jFTjkf4_bPKr-dmwX6aItYq9gmA0aHUMOvasUeqNwzw6EC5zmddcvc4Y9b_Y_31cf22k3aIO/s30/search_icon.png); background-color:#F7F0FE; /*cor de fundo de onde digitamos a busca*/ color: #000;/*cor de fonte*/ } #search input.field:focus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRYsnCWkqqZ8UbScZqvnJ6uib3FHPXu7Rrka9StFlc968PEQK74bXkKtgi2dcEROruoQ9jFTjkf4_bPKr-dmwX6aItYq9gmA0aHUMOvasUeqNwzw6EC5zmddcvc4Y9b_Y_31cf22k3aIO/s30/search_icon.png); background-color:#fff;/*cor de fundo do botão Buscar em estado hover*/ } #search input.submit { background-color:#DCB3FA; /*cor de fundo do botão Buscar*/ color:#fff;/*cor da fonte do botão Buscar*/ } </style><div id='search'><form action='/search' id='searchform' method='get'><div><input class='field' id='s' name='q' onblur='if (this.value == '') {this.value = 'Digite sua busca..';}' onfocus='if (this.value == 'Digite sua busca..') {this.value = '';}' type='text' value='Digite sua busca..'/><input class='submit' name='submit' type='submit' value='Buscar'/></div></form></div>