Aplicar estilos avanzados a campos de texto

Es posible aplicar estilos avanzados a campos de texto normales (<input type=text>) y a los que soportan varias líneas (<textarea>). Como estilo se puede 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. En los siguientes ejemplos podremos comprobar las posibilidades de las hojas de estilos, aplicadas sobre campos de texto y textareas. Ejemplo 1

• Código:
  
  <input type="text" name="campotexto0" size="12" style="border-width: 2px; border-style: solid; font-size:8pt; color: #009900; letter-spacing : 3px;">
  
  
• Resultado: (Probemos a escribir dentro del espacio de texto)

Este campo de texto se presenta con:

• Un borde de 2 pixeles
  
• Un borde sólido
  
• Tamaño de letra: 8 puntos
  
• Color del borde y de las letras: verde
  
• Espacio entre las letras: 3 pixeles

Ejemplo 2

• Código:
  
  <input type="text" name="campotexto1" size="12" style="background-color:F2F5A9; border: 1px solid #C6C60D; font-size:8pt; color: #fe5a5a">
  
  
• Resultado: (Probemos a escribir dentro del espacio de texto)

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: amarillo
  
• Borde de 1 pixel
  
• Borde de estilo sólido
  
• Color del borde: amarillo más oscuro
  
• Tamaño del texto: 8 puntos
  
• Color de las letras: rojo

Ejemplo 3

• Código:
  
  <textarea cols="20" rows="3" name="campotexto2" style="overflow:auto; border: 1px solid #ff6666;"></textarea>  
  
  
• Resultado:
  
  (Probemos a escribir dentro del espacio de texto)

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
  
• Borde de color rojo

Ejemplo 4

• Código: <textarea cols="20" rows="3" name="campotexto3" readonly style="overflow:auto; border-style:dashed; border-color:555555; border-width: 1px;">  
En este campo textarea, hemos incluido también un texto con el que se inicializará su contenido.
</textarea>
  
  
• Resultado:
  
  En este campo textarea, hemos incluido también un texto con el que se inicializará su contenido.

En este campo textarea, hemos incluido 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, para la apariencia, los siguientes valores: Mostrar las barras de desplazamiento sólo cuando toca Un borde del campo punteado Un color del borde gris oscuro Un ancho del borde de 1 pixel. Nota: Con las anteriores indicaciones es posible aprender un poco más sobre cómo modificar el estilo de un campo de texto, para adaptarlo mejor al diseño de 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 se podrán 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.   Twittear

Índice Hojas de Estilo en Cascada CSS
Generalidades
Ejemplos de códigos CSS
Crear menú dinámico con CSS
Tabla con borde punteado
Campos de texto con estilos avanzados
Enlace con aspecto de botón
Crear recuadros con CSS

◄Anterior | Siguiente►