Foros del Web » Creando para Internet » CSS »

buscador estilo css

Estas en el tema de buscador estilo css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/08/2011, 15:55
Avatar de angel2010  
Fecha de Ingreso: julio-2010
Ubicación: monagas
Mensajes: 131
Antigüedad: 7 años, 3 meses
Puntos: 1
buscador estilo css

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
  #2 (permalink)  
Antiguo 11/08/2011, 16:10
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 3 meses
Puntos: 137
Respuesta: buscador estilo css

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

Código HTML:
Ver original
  1. <input value="Buscar..." onfocus="if(this.value=='Buscar...'){this.value=''}" onblur="if(this.value==''){this.value='Buscar...'}" type="text" />
  #3 (permalink)  
Antiguo 11/08/2011, 19:36
Avatar de angel2010  
Fecha de Ingreso: julio-2010
Ubicación: monagas
Mensajes: 131
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: buscador estilo css

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
  #4 (permalink)  
Antiguo 12/08/2011, 03:25
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años, 1 mes
Puntos: 63
Respuesta: buscador estilo css

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:
Ver original
  1. input{
  2. background-image: url(tu-imagen.png) no-repeat right
  3. }

Saludos
  #5 (permalink)  
Antiguo 12/08/2011, 17:09
Avatar de angel2010  
Fecha de Ingreso: julio-2010
Ubicación: monagas
Mensajes: 131
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: buscador estilo css

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
  #6 (permalink)  
Antiguo 13/08/2011, 06:30
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años, 1 mes
Puntos: 63
Respuesta: buscador estilo css

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
  #7 (permalink)  
Antiguo 01/09/2011, 11:13
Avatar de angel2010  
Fecha de Ingreso: julio-2010
Ubicación: monagas
Mensajes: 131
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: buscador estilo css

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

http://www.aonde.com/
  #8 (permalink)  
Antiguo 02/09/2011, 08:15
Avatar de DrFaust  
Fecha de Ingreso: septiembre-2011
Ubicación: Buenos Aires
Mensajes: 308
Antigüedad: 6 años, 1 mes
Puntos: 87
Respuesta: buscador estilo css

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!
  #9 (permalink)  
Antiguo 02/09/2011, 16:38
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Respuesta: buscador estilo css

Cita:
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 (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #10 (permalink)  
Antiguo 02/09/2011, 17:45
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: buscador estilo css

Cita:
Iniciado por _cronos2 Ver Mensaje
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??
  #11 (permalink)  
Antiguo 02/09/2011, 18:10
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 4 meses
Puntos: 309
Respuesta: buscador estilo css

Cita:
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 (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #12 (permalink)  
Antiguo 02/09/2011, 18:17
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 4 meses
Puntos: 1010
Respuesta: buscador estilo css

tu ya sabes que adoro las librerías

Etiquetas: estilo, buscadores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:13.