Estilos en campos de texto

Es posible aportar estilos y formatos a campos de texto de los formularios. En este capítulo veremos como hacerlo.

29/7/04 - Vamos a ver unos ejemplos sobre cómo aplicar estilos avanzados a campos de texto en páginas web. Nos referimos a campos de texto de los normales <input type=text> y campos de texto que soportan varias líneas <textarea>.

Con estilos, como ya se ha debido aprender en el manual de CSS, podemos definir el formato de presentación de cualquier elemento de la página. Los campos de texto, que siempre tienen una forma muy específica, también aceptan especificaciones de estilos para variar su apariencia típica.

Vamos a ver varios ejemplos para comprobar las posibilidades de las hojas de estilos, aplicadas sobre campos de texto y textareas.

<input type="text" name="campotexto0" size="12" style="border-width: 2px; border-style: solid; font-size:8pt; color: #009900; letter-spacing : 3px;">

Este campo de texto se presentará con un borde de 2 pixels, un borde sólido, tamaño de la letra de 8 puntos, color del borde y de las letras verde un poco oscuro. También se define un espaciado entre las letras de 3 pixel.

<input type="text" name="campotexto1" size="12" style="background-color:e3e3e3; border: 1px solid #666666; font-size:8pt; color: #000099">



Este campo de texto tiene los estilos declarados con una sintaxis un poco distinta, ya que se han agrupado varios estilos relativos al borde en un solo atributo. Los estilos con los que se presentará son: color de fondo grisáceo, borde de 1 pixel, borde de estilo sólido, color del borde gris más oscuro, tamaño del texto de 8 puntos y color de las letras azul.

<textarea cols="20" rows="3" name="campotexto2" style="overflow:auto; border: 1px solid #ff6666;"></textarea>



Este campo de texto con varias líneas, también llamado textarea, tiene viarios estilos, que son parecidos a los que hemos visto para el anterior campo de texto, con la salvedad del atributo overflow, que está definido como auto. El atributo overflow tiene relación con las barras de desplazamiento que aparecen en los textarea. El valor auto sirve para que la barra de desplazamiento vertical del campo de texto sólo aparezca en caso que se necesite, es decir, si el texto del campo supera las líneas que tiene reservadas el textarea. Si queremos que no se vean las líneas nunca, podemos asignarle el valor hidden al atributo overflow. Por lo que respecta a los otros estilos de este campo de texto de múltiples líneas, se han definido 3 valores para el estilo del borde, en un único atributo. Los estilos son borde de un píxel, borde de estilo sólido y borde de color rojo pastel.

<textarea cols="20" rows="3" name="campotexto3" readonly style="overflow:auto; border-style:dashed; border-color:555555; border-width: 1px;">

Hola a todos los que lean esto.
Espero que este ejemplo os parezca interesante!!
Saludos y suerte!
Miguel
</textarea>

Hola a todos los que lean esto. Espero que este ejemplo os parezca interesante!! Saludos y suerte! Miguel

En este campo textarea, hemos incluido también un texto con el que se inicializará su contenido. Primero llamamos la atención sobre el atributo de HTML readonly, que sirve para que el campo textarea no sea editable, es decir, que no se pueda cambiar su contenido. También con estilos CSS se han definido una serie de valores para la apariencia, estos son: mostrar las barras de desplazamiento sólo cuando toca, un borde del campo punteado, un color del borde gris oscuro y un ancho del borde de 1 pixel.

Conclusión

Esperamos que con estas indicaciones podáis aprender un poco más sobre cómo modificar el estilo de un campo de texto, para adaptarlo mejor al diseño de vuestras páginas.

Hay que tener en cuenta que las características de estilos no siempre están disponibles en todos los navegadores. Las más importantes sí que las podremos ver en todos los navegadores que soporten estilos, aunque ciertos valores, como el borde punteado, no se pueden visualizar correctamente en navegadores antiguos. Pasa lo mismo con el atributo readonly, que no siempre ha estado disponible en HTML.

+ 1 manual relacionado
+ 1 categoria relacionada
+ 2 comentarios no revisados

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en CSS

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 2 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba