Personalización del widget de área de texto de validación



Aunque el inspector de propiedades permite realizar cambios simples a un widget de área de texto de validación, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de área de texto de validación y crear un widget con el estilo que desee. Para ver una lista detallada de tareas de estilo, consulte www.adobe.com/go/learn_dw_sprytextarea_custom_es.

Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryValidationTextArea.css. Dreamweaver guarda el archivo SpryValidationTextArea.css en la carpeta SpryAssets del sitio cuando se crea un widget de área de texto de validación. Resulta útil consultar este archivo porque contiene información comentada sobre los distintos tipos de estilos que se pueden aplicar al widget.

Aunque es fácil editar las reglas para el widget de área de texto de validación directamente en el archivo CSS, también puede utilizar el panel Estilos CSS para editar el código CSS del widget. El panel Estilos CSS resulta útil para ubicar las clases CSS asignadas a partes distintas del widget, en especial si utiliza el modo Actual del panel.

Aplicación de estilo al texto del mensaje de error del widget de área de texto de validación

De forma predeterminada, los mensajes de error del widget de área de texto de validación aparecen en rojo con un borde de 1 píxel alrededor del texto.

 Para modificar el estilo del texto de un widget de área de texto de validación, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, modifique las propiedades predeterminadas o añada sus propiedades y valores de estilo de texto:

Texto que se modifica

Regla CSS correspondiente

Propiedades que hay que modificar

Texto del mensaje de error

.textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg

color: #CC3333; border: 1px solid #CC3333;

Cambio de los colores de fondo del widget de área de texto de validación

 Para cambiar el color de fondo de un widget de área de texto de validación, utilice la siguiente tabla para localizar la regla CSS correspondiente y, a continuación, modifique los valores de color de fondo predeterminado:

Color de fondo que se cambia

Regla CSS correspondiente

Propiedad que se va a modificar

Color de fondo de un widget en estado válido

.textareaValidState textarea, textarea.textareaValidState

background-color: #B8F5B1;

Color de fondo de un widget en estado no válido

textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea

background-color: #FF9F9F;

Color del fondo con widget seleccionado

.textareaFocusState textarea, textarea.textareaFocusState

background-color: #FFFFCC;