Personalizar un cuadro de texto:

Para personalizar un cuadro de texto, primero debemos colocar el código en donde deseemos:

<input class='textbox' name='q' size='24' value='' type='text'>


• El estilo: agregaremos class='textbox' dentro del input y agregaremos antes de (es decir, dentro de la hoja de estilos o css) lo siguiente:

# textbox {
background: #ffffff;
border: 1px;
text-color: #000000;
font-family: tahoma;
float:left;
margin-right:2px;
padding-left:2px;
}

y modificaremos las propiedades según queramos.

• El tamaño: Modificaremos el valor de size='24'.


• El texto: Si deseamos que haya texto en el cuadro, que al posicionar el cursor desaparezca y que vuelva a aparecer al salir del cuadro de texto, agregaremos el texto en color, y reemplazaremos el texto en negrita por los valores que deseemos:

<input class='textbox' name='q' size='24' type='text'
value = 'Buscar...' onblur='if (this.value == "") {this.value = "Buscar...";}' onfocus='if (this.value == "Buscar...") {this.value = ""}'>