【CSS】フォーム入力欄を選択しやすくするフォーカス時の装飾と状態切り替え

フォームの入力欄は、見た目がシンプルなままだと「ここに入力する」と気づきにくいことがあります。特にテキストボックスやテキストエリアは、クリックしやすさだけでなく、フォーカス時の見た目を分かりやすくしておくと、ユーザーが迷わず操作しやすくなります。

この記事では、CSSでフォーム入力欄を選択しやすくするためのフォーカス時の装飾と、通常時・フォーカス時・入力済みといった状態の切り替え方を紹介します。初心者でも実装しやすいように、実際に使えるコード例を交えて解説します。

フォーカス時の装飾が重要な理由

フォーカスとは、入力欄が選択されていて、キーボード入力を受け付ける状態のことです。マウスでクリックしたときだけでなく、Tabキーで移動したときにもフォーカスが当たります。

このとき、枠線の色を変えたり、影をつけたりすると、今どの入力欄を操作しているかがすぐ分かります。見た目の変化がないと、特に項目数が多いフォームでは入力中の場所を見失いやすくなります。

基本のフォーカススタイル

まずは、シンプルなテキスト入力欄にフォーカス時の装飾を付ける例です。:focus は、要素がフォーカスされたときに適用される疑似クラスです。

<style>
  .form-input {
    width: 100%;
    max-width: 360px;
    padding: 12px 14px;
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  }

  .form-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    background-color: #f8fbff;
  }
</style>

<input type="text" class="form-input" placeholder="お名前を入力してください">

この例では、フォーカス時に青い枠とやわらかい影を表示しています。transition を入れておくと、状態の切り替えが急すぎず、自然な動きになります。

状態を切り替えて見やすくする考え方

フォーム入力欄は、通常時・フォーカス時・入力済みの3つを意識すると整理しやすくなります。CSSだけで扱える範囲と、JavaScriptを使うと便利な範囲を分けて考えるのがポイントです。

• 通常時: まだ操作していない状態
• フォーカス時: 現在入力中の状態
• 入力済み: 何か文字が入っている状態

特に入力済みの状態は、プレースホルダーだけでは判別しにくいため、クラスを付けて見た目を変える方法が実用的です。

入力済みの状態をクラスで切り替える例

ここでは、JavaScriptで入力があるかどうかを判定し、is-filled クラスを付け外しする例を紹介します。入力中かどうかを視覚的に分けたいときに使いやすい方法です。

<style>
  .field {
    margin-bottom: 16px;
  }

  .field-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
  }

  .form-input {
    width: 100%;
    max-width: 360px;
    padding: 12px 14px;
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  }

  .form-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    background-color: #f8fbff;
  }

  .form-input.is-filled {
    border-color: #16a34a;
    background-color: #f0fdf4;
  }
</style>

<div class="field">
  <label class="field-label" for="name">お名前</label>
  <input type="text" id="name" class="form-input" placeholder="山田 太郎">
</div>

<script>
  const input = document.querySelector('.form-input');

  function toggleFilledState() {
    input.classList.toggle('is-filled', input.value.trim() !== '');
  }

  input.addEventListener('input', toggleFilledState);
  toggleFilledState();
</script>

このコードでは、文字が1文字でも入っていればis-filled クラスが付き、背景色と枠線の色が変わります。空欄に戻すとクラスは外れます。これにより、入力したかどうかが分かりやすくなります。

プレースホルダーに頼りすぎない

入力欄の説明をプレースホルダーだけに頼ると、入力開始後にヒントが消えてしまい、何を入れる欄だったか分かりにくくなることがあります。ラベルをきちんと表示し、そのうえでフォーカス時の装飾を付けるのが基本です。

また、outline: none; を使う場合は、代わりに見やすいフォーカス表現を必ず用意してください。フォーカスの見た目を消したままだと、キーボード操作のしやすさが大きく下がります。

まとめ

フォーム入力欄は、フォーカス時の装飾を入れるだけでかなり使いやすくなります。さらに、入力済みの状態も見た目で切り替えると、ユーザーが今どの項目を操作しているかを把握しやすくなります。

まずは :focus で枠線や影を変え、必要に応じてJavaScriptで入力済みクラスを切り替える方法から試してみてください。シンプルな実装でも、フォームの使いやすさは向上します。