Misión

Me gustaría personalizar el campo de búsqueda y el botón en mi blog de WordPress.

La búsqueda campo de texto y un botón que tengo en mente va a tener tres estados:

off

:hover

:focus

Necesito tener tres diferentes id de DIV para cada uno de estos estados.

De búsqueda del Campo de Texto con los detalles específicos

Además, pienso que hay que ser el texto «buscar en el sitio» inicialmente cargado en la búsqueda del campo de texto. cuando un usuario hace clic en la barra de búsqueda de texto del campo de texto inicial desaparecerá y los usuarios cursor aparecerá parpadeando. el usuario puede, a continuación, escriba su palabra clave de búsqueda. si después de escribir en su palabra clave que suceden haga clic en la búsqueda del campo de texto, su palabra clave permanecerá en el campo de texto intacto. si se decide eliminar su palabra clave y haga clic fuera de la búsqueda del campo de texto , el texto «buscar en el sitio» volverá a aparecer.

De búsqueda del Botón detalles

El botón de búsqueda se tiene que tener el texto «buscar» que está centrado vertical y horizontalmente.

Estado actual de mi Campo de Búsqueda de Texto y el Botón

mi actual del formulario de búsqueda y el sitio puede ser visto aquí en criticear

He sido capaz de hacer mi formulario de comentarios a los campos de texto tienen los 3 estados que he mencionado anteriormente, ya tengo el código de ottodestruct WordPress rosca comentarios tutorial.

la cosa es que yo no entiendo muy bien cómo tomar este formulario de comentarios css y aplicarlo a mi búsqueda del campo de texto y un botón. usted puede comprobar fuera de mi formulario de comentarios en mi blog criticear la página de entrada individual

Aquí está mi formulario de búsqueda de CSS:

aquí está mi searchform.php código:

Aquí es el searchform php llamada que tengo en mi header.php:

Si usted tiene alguna pregunta o necesita más información que la que me haga saber. Espero que pueda ayudar. Gracias.

InformationsquelleAutor | 2009-08-19

1 Comentario

  1. 1

    Que usted necesita para utilizar CSS para el estilo de la forma como usted desea, y JavaScript o una biblioteca de JavaScript (como jQuery) para crear el enfoque/desenfoque efecto que estás buscando. No voy a hacer todo para usted, pero sólo voy a apuntar en la dirección correcta.

    Primero de todo, usted no necesita «3 diferentes id de DIV para cada uno de estos 3 estados.» CSS ha pseudo-selectores para :hover y :focus, así que eso es todo lo que usted necesita. Si alguna vez te has cogido para arriba en el que o correr en problemas con el navegador, que siempre se puede utilizar JavaScript (de nuevo, te recomiendo jQuery).

    Para la Búsqueda «sitio» efecto en el cuadro de entrada, que va a hacer algo como esto (esto es jQuery):

    La última cosa que voy a mencionar es que sus clases CSS searchfield y searchbutton hacer que el código HTML más detallado de lo que debe ser. Usted puede fácilmente tener acceso a estos campos en tu CSS sin tener que individualmente declararlos en su HTML:

    • Gracias Josh, creo que entiendo la parte sobre el uso de pseudo-selectores para :hover y :focus. El siguiente ser correcto? #searchform input[name=s] :hover, #searchform input[name=s] :focus quiero señalar que yo no estoy en busca de un efecto de desenfoque. Yo justo desee que los cambios entre los 3 estados que suceda al instante. Así que basado en este hecho, puedo necesidad de jQuery para conseguir esos instantánea de los efectos del cambio? Gracias por señalar acerca de mi código de verbosidad. Me gustaría evitar tanto como sea posible. ¿Puede recomendar algunos sitios o tutoriales que crees que me iba a beneficiar? gracias
    • Tu CSS es correcto lo que hay: #searchform input[name=s]:mueva el cursor debería funcionar bien (sin espacio entre). Usted no necesita jQuery para que. Pero yo sugeriría jQuery (también puede utilizar regulares de JavaScript) para el desenfoque/efecto de enfoque que desee para el «sitio de Búsqueda de texto» – que es el desenfoque que le estaba hablando. (En JavaScript, lo que se llama un «desenfoque» cuando se mueve fuera de un elemento, en este caso el cuadro de texto.)
    • He aquí un buen artículo sobre CSS pseudo-clases: devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-Pseudo-Classes Y se pueden encontrar muy buenos, la documentación detallada y tutoriales de jQuery en jquery.com
    • una última cosa. yo quería tener el texto «critisearch» en el campo de búsqueda de texto. ¿cómo puedo conseguir que el texto no? también, me gustaría que el texto para desaparecer al instante cuando un usuario hace clic en el campo de texto. y si deciden hacer clic fuera del campo de texto, mientras que el campo de texto está vacío el texto «critisearch» haría estallar de nuevo. cómo hacer esto?
    • Me explicó que en mi respuesta. Eso es lo que el primer bloque de código es (es jQuery). También, por favor elegir esta como la mejor respuesta si te ha ayudado. 🙂
    • muchas gracias Josh

Dejar respuesta

Please enter your comment!
Please enter your name here