buscador estilo css

[angel2010]

hola a todos quisiera que me ayudara a dar estilo a un buscador que estpy haciendo

este un ejemplo de la manera que lo quiero http://www.aonde.com/ al no presionar que aparesca buscar que cuando balla a tipiar se quite si me pueden ayudar se lo agradeseria

[alexk]

Eso no es con CSS.... busca "limpiar value js" o algo por el estilo hay muchas opciones... algo rapido seria

Código HTML:

<input value="Buscar..." onfocus="if(this.value=='Buscar...'){this.value=''}" onblur="if(this.value==''){this.value='Buscar...'}" type="text" />
 

[angel2010]

y para darle estilo o colocar una imagen al lado yo tengo un codigo css que hace esa parte pero no lo e probado probe el que tu hiciste y funciona pero falta darle estilo o colocar una imagen dentro del input a la derecha que al presionar busque la informacion seria bueno si me alludaras con esa parte

[Batan]

Hola
Propiedad de fondo, background-image:url(imagen) no-repeat right. no-repeat para no repetir el fondo y right para posicionarla a la derecha.

Código CSS:

input{
background-image: url(tu-imagen.png) no-repeat right
}
 

Saludos

[angel2010]

pero hay un problema por que yo lo quiero como boton la imagen que al darle clik se ejecute para que pueda buscar la informacion

[Batan]

Bueno perdona, yo pensaba que querias que imagen pequeña quedase fija al lado derecho del botón.

Pero con el estilo que te di funciona igual tan solo busca para que sirven no-repeat y right, y sabrás para que sirven, y segun tus necesidades podrás hacer lo que tu quieres.

Saludos

[angel2010]

quien me podría decir como puedo hacer este tipo de buscador que esta en esta pagina

http://www.aonde.com/

[DrFaust]

Ese buscador está diseñado de la siguiente manera.

- Una caja de texto con una imagen de fondo que simula un borde redondeado. Podés armar la imagen con fondo transparente en formato PNG24, o bien podés usar el mismo color de fondo que la página.

- Un código JavaScript similar al que posteó alexk más arriba.

- Un div con una imagen de fondo que simula un botón de "buscar" con el borde redondeado. Al igual que antes, podés usar un PNG24 con fondo transparente, o incluir el color de fondo de la página web en la imagen.

- Un efecto de rollover en el botón de "buscar", utilizando una segunda imagen que cambia el sentido del gradient de fondo y el tamaño del texto.

No tiene ningún misterio. Diseñá todo en Photoshop, recortá las partes (la caja de texto, el botón, y el botón en rollover) y exportalas en el formato que hayas elegido.

¡Suerte!

[_cronos2]

Iniciado por DrFaust

- Un código JavaScript similar al que posteó alexk más arriba.

Mi consejo es que le des el atributo placeholder al input. Es parte de HTML5 así que no está soportado en todos los navegadores, pero simplemente sería cuestión de comprobar desde JS si existe o no existe esa propiedad para emular el comportamiento con JS.
Saludos (:

[IsaBelM]

Iniciado por _cronos2

Mi consejo es que le des el atributo placeholder al input. Es parte de HTML5 así que no está soportado en todos los navegadores, pero simplemente sería cuestión de comprobar desde JS si existe o no existe esa propiedad para emular el comportamiento con JS.
Saludos (:

donde has dejado tu valor??

[_cronos2]

Iniciado por IsaBelM

donde has dejado tu valor??

Cuando leí valor esperaba valentía, no un método XDD
La verdad es que en el foro de JS todavía le veo cierto sentido, pero en el de CSS no mucho. La solución de @alexk es la que usaba yo hasta que medio desarrollé JSPlus, el único inconveniente que tiene es que no emula el cambio de color, pero eso es un extra. Aunque si esto significa usuarios del framework, adelante
Saludos (:

[IsaBelM]

tu ya sabes que adoro las librerías