Ayuda con edición de caja de búsqueda en plantilla de Blogger

Jhon Urbano Seguir

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Jun 2013
Mensajes
288
Hola Chicos, hace un tiempo presenté la plantilla para #blogger que estaba haciendo. Bueno, he querido editar la caja de busqueda que aparece en la barra superior pero todavía no logro hacer lo que quiero y no se si voy bien :S

Lo que quiero es similar al buscador de esta pagina: Abduzeedo Design Inspiration | Design Inspiration & Tutorials que aparezca el buscador y que quede así al quitar el cursor, pues es que yo lo hice con :hover (soy muy nuevo en esto, llevo tan solo unos meses aquí aprendiendo a las malas y esa fue la única que se me ocurría)

Si alguien me ayuda a encontrar una solución a eso.

Aqui esta en lo que estoy trabajando es mi primer proyecto Labs

---------- Post agregado el 30-oct-2013 hora: 01:47 ----------

Por favor alguien que me ayude
 

Jhon Urbano

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Jun 2013
Mensajes
288
Sí. Es que el código que estaba haciendo yo no me quedó como queria y luego lo que hice fue copiar el codigo de la otra pagina.

Pero siii Es como me lo acabaste de pasar!!! Muchas Gracias!!!!!!

algo parecido a eso es lo que quieres, no?

Edit fiddle - JSFiddle

Saludos.

---------- Post agregado el 05-nov-2013 hora: 20:48 ----------

aunque veo que si lo tienes asi ya, entonces que es lo que quieres hacer?
 

iamfrontend

Eta
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
10 Oct 2010
Mensajes
1.417
Fácil.

Primer haz la caja sin bordes con la imagen de buscar como fondo en el centro con un ancho de 30px aprox.

Luego cuando hacemos clic sobre ella activamos el pseudo elemento :focus y aplicamos estilos para la caja dandole un nuevo ancho de 200px y un borde gris y listo.
 

Jhon Urbano

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
23 Jun 2013
Mensajes
288
Gracias [MENTION=3627]Miguel De Leon[/MENTION] , ahora si entendí el concepto. Estoy iniciando en este tema y lo aplico a mis nuevos proyectos :D
 
Arriba