Como personalizar una caja de texto de forma profesional

[ArturoGallegos]

?¿ no veo tan complicado el crear un buscador como el de la imagen inicial, amigo elanguido si tienes la idea de como se hace, aunque creo que te falto buscarle un poco mas.... yo te propongo un codigo como este ->

en el html

Código HTML:

<!-- Form para buscador -->    
    <div class="Buscador">
        <form method="get" action="http://www.google.com/cse" name="Buscador">
            <input type="hidden" name="cx" value="002989906371487604116:t8f5gmsmuzo" />
            <input type="hidden" name="ie" value="UTF-8" />
            <input type="text" name="q" value="Buscar" onclick="Limp();" class="Buscar" />
            <input type="submit" name="sa" value="&nbsp;" class="BtnBuscar" />
            <script type="text/javascript">
            function Limp (){
                document.Buscador.q.value = '';
                }              
            </script>
        </form>
    </div>
 

y en tu css

Código CSS:

/* estilos para el buscador */
.Buscador{width: 140px; height: 27px;; float:right; padding:6px;}
input{border:none; font-family: monospace; color:#666; font-size:12px;}
.Buscar{width: 112px; height:17px; padding:2px 10px 2px 22px; background: url(img/CajaBusqueda.jpg) no-repeat; float:right;}
.BtnBuscar{width:22px; height:21px; cursor: pointer; margin:-21px 0 0 -5px; background: transparent; float:left;}
 

te invito a verlo ya armado -> Buscador Personalizado

solo es el estilo visual ya la funcionalidad depende de vos como quieras integrala si en java, php o ASP

---------------------------------------
cambie un poco el codigo que les habia puesto, para que funcione usando el buscador personalizado de google que es bastante comun hoy dia...