選択検査 Widget のカスタマイズ
"SpryValidationSelect.css" ファイルには、選択検査 Widget のデフォルトのスタイル設定が用意されています。 ただし、該当する CSS ルールを変更することによって Widget をカスタマイズできます。 "SpryValidationSelect.css" ファイルの CSS ルールでは、Widget の HTML コードの関連するエレメントと同じクラス名が使用されるため、Widget とそのエラー状態に対応する CSS ルールを簡単に把握できます。
"SpryValidationSelect.css" ファイルは、カスタマイズを開始する前に Web サイトに配置しておく必要があります。 詳細については、ファイルの準備を参照してください。
選択検査 Widget のスタイル設定 (一般的な方法)
- "SpryValidationSelect.css" ファイルを開きます。
- Widget の変更する部分の CSS ルールを見つけます。 たとえば、選択 Widget の必須状態の背景色を変更するには、"SpryValidationSelect.css" ファイルの .selectRequiredState ルールを編集します。
- CSS ルールを変更してファイルを保存します。
"SpryValidationSelect.css" ファイルには、特定のルールに対するコードと目的を説明するさまざまなコメントが含まれます。 詳細については、ファイル内のコメントを参照してください。
選択検査 Widget のエラーメッセージのテキストのスタイル設定
選択検査 Widget のエラーメッセージは、デフォルトでは、1 ピクセルの実線のボーダーで囲まれた赤いテキストで表示されます。
選択検査 Widget のエラーメッセージのテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、デフォルトのプロパティを変更するか、または独自のテキストスタイルプロパティおよび値を追加します。
|
スタイルを設定するテキスト |
関連する CSS ルール |
変更する関連プロパティ |
|---|---|---|
|
エラーメッセージのテキスト |
.selectRequiredState .selectRequiredMsg、.selectInvalidState .selectInvalidMsg |
color: #CC3333; border: 1px solid #CC3333; |
選択検査 Widget の背景色の変更
さまざまな状態の選択検査 Widget の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、デフォルトの背景色値を変更します。
|
変更する背景色 |
関連する CSS ルール |
変更する関連プロパティ |
|---|---|---|
|
有効状態の Widget の背景色 |
.selectValidState select、select.selectValidState |
background-color: #B8F5B1; |
|
無効状態の Widget の背景色 |
select.selectRequiredState、.selectRequiredState select、select.selectInvalidState、.selectInvalidState select |
background-color: #FF9F9F; |
|
フォーカスがある Widget の背景色 |
.selectFocusState select、select.selectFocusState |
background-color: #FFFFCC; |
状態関連のクラス名のカスタマイズ
CSS 内のルールと HTML コード内のクラス名を変更することによって、エラーメッセージ関連のクラス名を独自のクラス名に置き換えることはできますが、ビヘイビアは Spry フレームワークの一部としてハードコーディングされているため、状態関連のクラス名を変更または置換することはできません。 ただし、Widget コンストラクタの 3 番目のパラメータで新しい値を指定することによって、デフォルトの状態関連のクラス名を独自の名前で上書きすることができます。
Widget の状態関連のクラス名を変更するには、次のように、上書きを行うオプションのいずれかを Widget コンストラクタの 3 番目のパラメータに追加し、カスタムクラス名を指定します。
<script type="text/javascript">
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {requiredClass:"required"});
</script>
次の表に、組み込みの状態関連のクラス名を上書きするために使用できるオプションのリストを示します。
|
オプション |
説明 |
|---|---|
|
requiredClass |
"selectRequiredState" 組み込み値を上書きします。 |
|
validClass |
"selectValidState" 組み込み値を上書きします。 |
|
focusClass |
"selectFocusState" 組み込み値を上書きします。 |
|
invalidClass |
"selectInvalidState" 組み込み値を上書きします。 |