Ajuda com edição de caixa de busca em modelo do Blogger

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

usar focus 🙂focus) en lugar de hover:


Saludos.

Gracias por responder, ahora que me desocupe lo pruebo

lombervid disse:

usar focus 🙂focus) en lugar de hover:

HTML:

#search:focus {
/* codigo aqui */
}

Saludos.

Clique para expandir...

u_u no pude. Ó no me quedó

Jhon Urbano disse:

u_u no pude. Ó no me quedó

Clique para expandir...

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?

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!!!!!!

lombervid disse:

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?

Clique para expandir...

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.

Gracias [MENTION=3627]Miguel De Leon[/MENTION] , ahora si entendí el concepto. Estoy iniciando en este tema y lo aplico a mis nuevos proyectos 😀