¿Cómo modificar el estilo de un recuadro de búsqueda?

craigchek · #1 (**permalink**) 30/01/2011, 06:57

Hola, quisiera modificar el color de fondo de un recuadro de búsqueda como el que sale en esta página arriba a la derecha:

https://developer.mozilla.org/en/CSS/text-rendering

...creo que se hace con CSS, pero no veo dónde se establecen los parámetros que lo modifican.

Agradezco cualquier ayuda que me puedan ofrecer para conseguirlo.

Gracias.

IsaBelM · #2 (**permalink**) 30/01/2011, 08:49

se usa tanto css como javascript

Cita:

la parte de css
en el estado inicial
un selector con las propiedades de background y border
cuando el ratón está encima
un selector: hover con la propiedad background

Cita:

la parte javascript
cuando tiene el foco (onfocus)
modificas el objeto con la propiedad backgroundColor de dom style
y eliminas el valor
cuando pierde el foco (onblur)
modificas el objeto con la propiedad backgroundColor de dom style
y restauras el valor inicial con la propiedad defaultValue

stingofung · #3 (**permalink**) 30/01/2011, 09:26

Saludos "craigchek",

Las técnicas usadas para crear esos efectos en las cajas de busquedas se logran usando CSS + JAVASCRIPT.

Entre los efectos usados tenemos:

* Auto-foco al cargar la página.
* Resaltado de la caja cuando recibe el foco.
* Mostrado / ocultado del texto por defecto.

Suponte que la estructura de tu documento HTML es la siguiente:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Mejorando las cajas de búsqueda</title>
    <link rel="stylesheet" href="main.css" type="text/css" media="screen" />
</head>
<body>
    <div class="wrapper">
        <div class="section">
            <h1>Ejemplo con auto-foco al cargar la página + resaltado</h1>
            <input id="search1" type="text" class="text" value="Buscar en la web..." />
        </div>
        <div class="section">
            <h1>Ejemplo de resaltado + ocultado / mostrado texto por defecto</h1>
            <input id="search2" type="text" class="text" value="Buscar en la web..." />
        </div>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

Entonces los pasos a seguir son los siguientes:

Paso 1: Añadir estilo con CSS

Utilizo lo que se conoce como CSS Reset, que no es más que una declaración inicial de todos (o casi todos) los atributos HTML al inicio del documento CSS que “tiende a cero o nulo”.

Código CSS:

Ver original@CHARSET "UTF-8";
 
/*  RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100&#37;;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
    line-height: 1em;
    font-size: 12px;
    background: #262626 url(img/bg.png) repeat scroll 0 0;
    font-family: Myriad Pro, Arial, Helvetica, sans-serif;
    margin: 0pt;
    cursor: default;
}
table{
    border-collapse: separate;
    border-spacing: 0pt;
}
strong{
    font-weight: 700;
}
caption, th, td{
    font-weight:normal;
    text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after{
    content:"";
}
blockquote, q{
    quotes:"" "";
}
pre{
    font-family: Arial, Helvetica, sans-serif;
}
input{
    border: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
textarea{
    font-family: Arial, Helvetica, sans-serif;
    color: #888888;
    padding: 7px 3px 0 4px;
    font-size: 11px;
}
select{
    font-size: 11px;
    color: #888888;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #CAD2CE;
}
ul{
    list-style: none;
    list-style-type: none;
    list-style-position: outside;
}
a{
    cursor: pointer;
    color: #296ba5;
    text-decoration: none;
    outline: none !Important;
}
html,body{
    height:100%;
}
.clear{
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
    line-height: 0;
}
.clearfix{
    overflow: hidden;
}
.fleft{
    float: left;
}
.fright{
    float: right;
}
.italic{
    font-style: italic;
}
/*  RESET */
 
/* CONTENT */
.wrapper
{
    width: 800px;
    margin: 0pt auto;
    padding-top: 50px;
}
h1{
    color: #fff;
    font-size: 18px;
    line-height: 3em;
}
.section{
    margin-bottom: 25px;
}
input.text{
    width: 90%;
    background: #171717 url(img/search.png) no-repeat scroll right 2px;
    padding: 13px;
    color: #8c8c8c;
    border: 1px solid #393939;
    margin-bottom: 30px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    font-size: 16px;
}
input.text.active{
    background: #343434 url(img/search.png) no-repeat scroll right -43px;
    border-color: #000;
    color: #fff;
}

Paso 2: Añadir magia con jQuery

Todo el código que viene a continuación iría en un único documento javascript, en mi ejemplo se llama “main.js“.

a) Declaración de variables

Código Javascript:

Ver original//variables globales
var searchBoxes = $(".text");
var searchBox1 = $("#search1");
var searchBox2 = $("#search2");
var defaultText = "Search MDN";

b) Gestionando los eventos focus y blur

Código Javascript:

Ver original//efectos en el evento focus (foto) para ambas cajas de busqueda
searchBoxes.focus(function(){
    $(this).addClass("active");
});
searchBoxes.blur(function(){
    $(this).removeClass("active");
});

c) Activando el autofoco
Mediante la llamada de la función focus() haremos un autofoco en la primera de las cajas de búsqueda, simulando el mismo efecto que hace Google cuando entramos en su buscador.

Código Javascript:

Ver original//Activamos y auto activamos el foco en la primera caja de busqueda #search1, cuando el documento esta listo
searchBox1.focus();

d) Mostrando / Ocultando el texto por defecto
Aqui lo que se hace es que si el usuario pincha en la caja de busqueda esta reciba el foco y se vaya el texto por defecto y que si salimos de la caja, vuelva a aparecer. Cabe destacar que esto sólo ocurrirá si el texto es el original, el texto por defecto, no para textos distintos introducidos por nosotros.

Código Javascript:

Ver original//Mostramos / ocultamos el texto por defecto si es necesario
searchBox2.focus(function(){
    if($(this).attr("value") == defaultText) $(this).attr("value", "");
});
searchBox2.blur(function(){
    if($(this).attr("value") == "") $(this).attr("value", defaultText);
});

Ya tienes todo listo para emular el efecto que viste en la página MDN, espero y te sea de ayuda.

craigchek · #4 (**permalink**) 30/01/2011, 12:55

Muchísimas gracias stingofung,
agradezco enormemente la molestia que te has tomado en responderme, pero sigo teniendo dudas y en las pruebas que he hecho siguiendo tu mini tutorial no me ha salido igual que lo esperado.

En el HTMl de ejemplo que me pones, haces referencia a 2 archivos javascript, el main.js y jquery.js, pero no mencionas luego nada de qué debe llevar el jquery.js.

Por otro lado, no sé muy bien cómo guardar los códigos javascript en el archivo main.js, ¿me lo podrías explicar un poco mejor?

Gracias de nuevo y disculpa mi ignorancia...

Un saludo.

IsaBelM · #5 (**permalink**) 30/01/2011, 16:53

Cita:

Iniciado por stingofung

Paso 2: Añadir magia con jQuery

realmente crees que para logras ese efecto, es necesario todo ese css y usar una librería??

Cita:

Iniciado por IsaBelM

se usa tanto css como javascript

stingofung · #6 (**permalink**) 30/01/2011, 21:18

Cita:

realmente crees que para logras ese efecto, es necesario todo ese css y usar una librería??

Pues no, yo solo lo haría con CSS + JAVASCRIPT vulgar y silvestre. Pero en el caso de mis proyectos simpre voy de la mano de JQUERY.

Cita:

En el HTMl de ejemplo que me pones, haces referencia a 2 archivos javascript, el main.js y jquery.js, pero no mencionas luego nada de qué debe llevar el jquery.js.

Por otro lado, no sé muy bien cómo guardar los códigos javascript en el archivo main.js, ¿me lo podrías explicar un poco mejor?

Cierto, disculpa por no mencionarte esa parte. La libreria jquery.js es un framework de Javascript y la puedes descargar en el siguiente enlace:

http://jquery.com/

Con respecto a como crear un archivo .js es sencillo. Lo que tienes que hacer es:

1) Abrir el block de notas.
2) Copias el código javascript que te indique en el minitutorial y lo pegas en el documento.
3) Guardas el documento con el nombre: main.js
4) Agregas el archivo creado en la raíz de tu proyecto y listo.

Prueba y me avisas, saludos.