ラジオグループ Widget のカスタマイズ



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

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

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

ラジオグループ検証 Widget のスタイル設定 (概要説明)

  1. SpryValidationRadio.css ファイルを開きます。

  2. Widget に変更を加える部分に関する CSS ルールを見つけます。たとえば、ラジオグループ Widget の必須状態を示す背景色を変更するには、SpryValidationRadio.css ファイルの radioRequiredState を編集します。

  3. CSS ルールに必要に応じた変更を加え、ファイルを保存します。

SpryValidationRadio.css ファイルには、コードや特定のルールの用途について説明する充実したコメントが含まれています。詳細については、ファイル内のコメントを参照してください。

ラジオグループ検証 Widget のエラーメッセージのテキストスタイル設定

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

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

スタイルを設定するテキスト

関連する CSS ルール

変更する関連プロパティ

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

.radioRequiredState .radioRequiredMsg、.radioInvalidState .radioInvalidMsg

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