5 trucos para jugar con el textarea

En el diseño web no hay que dejar pasar por alto el elemento textarea de HTML, y es que su comportamiento es un tanto extraño con los navegadores y con CSS, puesto que al tener muchas propiedades en algunos navegadores sirven y en otros no, en otros se puede sacar más provecho y en otros no, como Internet Explorer, por eso esta ocasión les traigo 7 trucos para jugar con el textarea, donde podremos ver como poder cambiar propiedades de este singular elemento que podemos encontrar en la mayoría de las veces en los formularios, pero que también se encuentra presente en cualquier tipo de efecto.

Truco 1: Imagen de fondo

Podemos agregar una imagen de fondo a un textarea de forma muy fácil con css:

textarea {
background: url(images/benice.png) center center no-repeat; 
border: 1px solid #888;
}
Sin embargo el problema viene cuando ponemos el foco en el elemento porque no siempre suele redibujar la imagen de fondo. Para eso hay una solución usando jQuery:

$('textarea')
.focus(function() {
$(this).css("background", "none") })
.blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

Truco 2: Eliminar el brillo azul

En navegadores que funcionan con webkit como Safari y Chrome y Opera es normal ver que hay un brillo azul cuando enfocamos a un elemento de formulario, pues si no te gusta como se ve podemos eliminarlo fácilmente

textarea { outline: none; }

Truco 3: Eliminar las barras para redimensionar

De igual forma que el anterior, estos navegadores tienen activas propiedades en los elementos textarea que a veces no necesitamos, es el caso de las barritas que aparecen en la parte inferior derecha y es que podemos redimensionar el elemento como queramos, y si la ocasión no lo amerita, siempre podemos eliminarlas:

textarea { resize: none; }

Truco 4: Seguir escribiendo en la misma línea

La propiedad se llama wrap y permite que podamos escribir en la misma línea sin limitación, es decir, que aparezca la barra horizontal y no se corte el texto para pasar a otra línea. Como pueden ver, es muy útil si quieres escribir un código y no quieras que se pase a otra línea hasta que no le demos enter. Pues bien, aquí va el código:

<textarea wrap="off" cols="30" rows="5"></textarea>

Truco 5: Eliminar barras de desplazamiento en IE

Internet Explorer añade por defecto en los textarea una barra de desplazamiento, algo que se ve a primera vista horrendo, y si la quieres quitar aquí está el código css:

textarea { overflow: auto; }

Vía css-tricks