入力フォーカスとカード選択のためのCSSボーダーカラートランジション

ボーダーカラーのトランジション

ボーダーカラートランジションは、フォーム入力と選択可能なカードコンポーネントに不可欠です。フォーカス、選択、バリデーション状態について明確な視覚的フィードバックを提供します。

入力フォーカスボーダー

.input {
  border: 2px solid #27272a;
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.2s ease;
}

.input:focus {
  border-color: #3b82f6;
  outline: none;
}

.input.error {
  border-color: #ef4444;
}

.input.success {
  border-color: #22c55e;
}

選択可能なカードボーダー

.card {
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 16px;
  background-color: var(--surface);
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease;
}

.card:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.card.selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

ボーダー vs box-shadowリング

borderの代わりにbox-shadowを使用すると、box-shadowは要素の寸法に影響しないためレイアウトシフトを回避できます：

.input {
  border: 1px solid #27272a;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  transition: border-color 0.2s ease,
              box-shadow 0.2s ease;
}

.input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

なぜtransparentボーダーから始めるのか

ホバー時にのみボーダーを追加すると、要素がボーダー幅分だけシフトします。同じ幅の透明ボーダーから始めることで、レイアウトシフトを排除できます：

/* 悪い例: レイアウトシフトが発生 */
.card { border: none; }
.card:hover { border: 2px solid blue; }

/* 良い例: レイアウトシフトなし */
.card { border: 2px solid transparent; }
.card:hover { border-color: blue; }