"SpryValidationTextField.css" ファイルには、テキストフィールド検査 Widget とそのエラーメッセージのスタイルを設定するルールが含まれます。 このルールを編集して、Widget およびエラーメッセージの外観と印象に関するスタイルを設定できます。 CSS ファイル内のルールの名前は、Widget の HTML コードで指定されたクラスの名前に対応します。

"SpryValidationTextField.css" ファイルの CSS コードを次に示します。

/*Text Field styling classes*/
.textfieldRequiredMsg,
.textfieldInvalidFormatMsg,
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState .textfieldInvalidFormatMsg,
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg {
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}
input.textfieldRequiredState, .textfieldRequiredState input,
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input,
input.textfieldMinValueState, .textfieldMinValueState input,
input.textfieldMaxValueState, .textfieldMaxValueState input,
input.textfieldMinCharsState, .textfieldMinCharsState input,
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}
.textfieldFlashText input, input.textfieldFlashText {
	color: red !important;
}

"SpryValidationTextField.css" ファイルには、特定のルールに対するコードと目的を説明するさまざまなコメントも含まれます。 詳細については、ファイル内のコメントを参照してください。