Como personalizar una caja de texto de forma profesional

[elanguido]

saludos a todos.

estoy intentando modificar una caja de texto para que sea un buscador, para cambiar el color y demás no tengo problemas pero no sé como cambiarle la forma y ponerle dentro una imágen que haga de boton, de hecho esque no sé si hace con CSS o con javascript...

dejo una foto para que veais a qué me refiero:



Algo así es lo que intento hacer, que el cursor no se ponga encima de la lupa cuando pinches en él y que al pulsar enter realice la acción sin tener pulsar ningún boton.

espero impaciente vuestras respuestas.

[elanguido]

bueno... veo que no ha interesado mucho el tema...

no pasa nada, al final he estado haciendo pruebas y he conseguido dejarlo bastante bien, no tan fino como el de la imágen de arriba pero aceptable.

así ha quedado:



daría las gracias por las respuestas pero... no ha habido ninguna.

[Impostor]

Iniciado por elanguido

daría las gracias por las respuestas pero... no ha habido ninguna.

¿Nadie te hizo tu trabajo? ¿Porque no te preguntas si planteaste correctamente el hilo, si diste suficiente información?

Aquí se viene llorao de casa.

Saludos¡¡

[Sintak]

Iniciado por Impostor

¿Nadie te hizo tu trabajo? ¿Porque no te preguntas si planteaste correctamente el hilo, si diste suficiente información?

Aquí se viene llorao de casa.

Saludos¡¡

Que respuesta mas desacertada macho, elanguido vino con una duda, normal y corriente como podría tener cualquiera (que para eso esta el foro). Pa decir gilipolleces siempre esta uno a tiempo de "editar".

Y me sumo a la pregunta de cómo personalizar una caja de texto

Saludos

[elanguido]

dejalo Sintak, a palabras necias oídos sordos.

no sé si será la mejor forma pero yo he hecho lo siguiente:

he quitado el estilo por defecto tanto al boton como a la caja de texto, he puesto la imágen de la lupa como fondo al botón del formulario que solo contiene un espacio en blanco, y he hecho una función para que salga la mano cuando pases el ratón por encima, he metido ambos elementos en div independientes y los he superpuesto ajustandolos hasta que ha quedado de la forma que ves.

si alguien sabe una manera mejor de hacerlo agradecería que me/nos ilustrara, y eso no quiere decir que a los que no digan nada les esté acusando de algo, cosa que creo que tabién ha quedado clara en mi post anterior ;)

[Sintak]

elanguido

se me ocurren dos formas más.

La verdad es que no soy un erudito del css ni mucho menos, me manejo lo básico.

Pero bueno:

1- podemos coger la imagen que queremos, poner una capa de fondo y ajustar el cuadro, para que no se mueva.

2- podemos rodear el campo de texto de capas, con los dibujos que queremos.

No se muy bien como se podría hacer, ya es cosa de investigar el código y que alguien con mas experiencia en el tema nos aconseje.

Saludos

[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...

[mariomon17]

Wow¡......