テキストフィールド検証 Widget のカスタマイズ



プロパティインスペクタでは、テキストフィールド検証 Widget の簡単な編集は可能ですが、カスタマイズされたスタイル設定タスクはサポートされません。 テキストフィールド検証 Widget の CSS を変更すると、自由にスタイル設定した Widget を作成できます。高度なスタイル設定タスクの詳細については、www.adobe.com/go/learn_dw_sprytextfield_custom_jp を参照してください。

次のトピックに登場する CSS ルールは、すべて SpryValidationTextField.css ファイルに格納された初期設定ルールです。 Spry テキストフィールド検証 Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダに SpryValidationTextField.css ファイルが保存されます。 このファイルには、その Widget に適用されるさまざまなスタイルに関するコメント付き情報も格納されています。このため、このファイルを参照すると役に立ちます。

テキストフィールド検証 Widget に関するルールは、対応する CSS ファイルで直接編集することもできますが、[CSS スタイル] パネルを使用して Widget の CSS を編集することもできます。 [CSS スタイル] パネルでは、Widget のさまざまな部分に割り当てられた CSS クラスを見つけやすくなっています。特に [現在] モードがこの点に優れています。

テキストフィールド検証 Widget のエラーメッセージのテキストのスタイル設定

テキストフィールド検証 Widget のエラーメッセージは、初期設定では、1 ピクセルのボーダーで囲まれた赤いテキストで表示されます。

 テキストフィールド検証 Widget のエラーメッセージのテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定プロパティを変更するか、または独自のテキストスタイルプロパティおよび値を追加します。

変更するテキスト

関連する CSS ルール

変更する関連プロパティ

エラーメッセージのテキスト

.textfieldRequiredState .textfieldRequiredMsg、.textfieldInvalidFormatState .textfieldInvalidFormatMsg、.textfieldMinValueState .textfieldMinValueMsg、.textfieldMaxValueState .textfieldMaxValueMsg、.textfieldMinCharsState .textfieldMinCharsMsg、.textfieldMaxCharsState .textfieldMaxCharsMsg

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

テキストフィールド検証 Widget の背景色の変更

 さまざまな状態のテキストフィールド検証 Widget の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定の背景色値を変更します。

変更する色

関連する CSS ルール

変更する関連プロパティ

有効状態の Widget の背景色

.textfieldValidState input、input.textfieldValidState

background-color: #B8F5B1;

無効状態の Widget の背景色

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;

フォーカスがある Widget の背景色

.textfieldFocusState input、input.textfieldFocusState

background-color: #FFFFCC;