アンケートフォームで入力中の項目をフォーカスする方法

デフォルトですといま一つ変化が視認出来ないので、フォーカスしている事が分かるように、枠の太さを変えたり、色の変化を強くしたいという意味です。

分かりづらくてスミマセン。

ご質問ありがとうございます。

ご推察のように、これらの効果は CSS によって実現しています。

サンプルは Vicuna スキンの「SmartCanvas-Vega」を利用しています。Vicuna スキンの該当個所は次のようになっています。

input,
textarea {
	border-color: #d4d4d4 #eee #eee #d4d4d4;
	background-color: #fff;
}

input:hover,textarea:hover {
	border-color: #00a0dd;
}

input:focus,textarea:focus {
	border-color: #aaa;
	background-color: #fff;
}

こちらを参考にスタイルを設定してみてください。

:focus

フォーカスされたときの疑似クラス

:hover

マウスオーバーされたときの疑似クラス

以上、参考になりましたら幸いです。

ありがとうございます。教えていただいたソースを【環境設定 > CSSファイル編集(共通) > > 】に貼り付けるだけで出来ました。

ただサンプルページのように

• 入力必須項目　　→　ピンク
• 入力否必須項目　→　グレー
  という様な表示には出来ませんでした。こちらもCSSでの設定ということでしょうか??

それと上記ソースを追加後にコメントボックスが『立体表示（陰影表示）』になってしまうのも、どこかしらCSSに影響を与えているからでしょうか??

よろしくお願いいたしますm（_ _）m

影の効果が付くのは上記 CSS の指定によるものです。

input,
textarea {
	border-color: #d4d4d4 #eee #eee #d4d4d4;/* ここで四辺の色を指定 */
	background-color: #fff;
}

input:hover,textarea:hover {
	border-color: #00a0dd;
}

input:focus,textarea:focus {
	border-color: #aaa;
	background-color: #fff;
}

td.field-name strong {
        color: #CC0066;/* 必須項目を色づけ */
}

サンプルで必須項目に色が付くのは、Vicuna スキンで strong タグについてピンク色のスタイルが指定されているためです。

同じような表示にするには上記スタイルシートを追加します。

いつも丁寧に解説いただき誠にありがとうございます。

メールフォームにつき、私は以下の様に設定を変更しました。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
/* コメントボックスの各項目をマウスオーバーした際に、フォーカスしている事が分かる様にフレーム枠の色を変化 */
input,
textarea {
border-color: #eee #eee #eee #eee;
background-color: #ebebeb;
}
input:hover,textarea:hover {
border-color: #00a0dd; /* マウスオーバーされたときの疑似クラス */
background-color: #cdcdcd;
}
input:focus,textarea:focus {
border-color: #aaa; /* フォーカスされたときの疑似クラス */
background-color: #cdcdcd;
}
td.field-name strong {
color: #CC0066; /* 必須項目を色づけ */
}
td.field-name strong:after {
content: "*"; /* 必須項目名の後ろにアスタリスクをつける */
}
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
おかげさまで入力時の必須項目がひと目で分かるようになりました^^

私のメールフォームのページは【必須項目制御】を使って・・・たとえば『資料請求』『問い合わせ』が出来るようになっており、

1. 問い合わせ内容（資料請求か問い合わせを選択）
2. お名前（デフォルト設定：必須　○）
3. 住所（デフォルト設定：必須　×）
4. コメント（デフォルト設定：必須　×）

としてあります。

そして資料請求の際は『住所』を必須にし、問い合わせの際は『コメント』を必須になるよう設定してあります。

その際に内容に応じて、必須項目には色と必須項目名の後ろに『※』がつくことで非常に視覚的に分かりやすくなっております。これは非常に使ってみて良かったので、フォーラムをご覧の方も参考にしていただければと思いました。
m（_ _）m

くわしいフォローありがとうございます！

フィールドタイプの使いこなしには、慣れるまであれこれ試行錯誤されたのではないでしょうか。いろいろと工夫を凝らしていただき、とてもうれしいです(^_^)。

ウェブ制作業者ではない方に、ここまで工夫を重ねて使い込んでいただけるとは、正直なところ予想していませんでした。辛抱強く機能を探りながら、コツコツとサイト制作に取り組んでいただけて、感動しています。

CMONOS.JP を作ってよかったです(^_^)。