Foros del Web - Ver Mensaje Individual - ¿Cómo modificar el estilo de un recuadro de búsqueda?

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.