Vertical form controls

概要

縦書きフォームコントロールは writing-mode: vertical-rl や vertical-lr が設定された環境で、フォーム要素が適切に縦書きレイアウトに対応する機能です。日本語の縦書きフォームやUIで、スライダー、プログレスバー、セレクトメニューなどが正しく表示されます。direction プロパティで入力方向も制御できます。

対応ブラウザ

基本構文

.vertical-form {
  writing-mode: vertical-rl;
}
.vertical-form input[type="range"] {
  /* 自動的に垂直表示 */
}

実務での使いどころ

• 日本語縦書きフォーム

  日本語の縦書きページ内で、フォーム要素が自然に縦方向に配置されるレイアウトを実現します。

注意点

アクセシビリティ

• 縦書きフォームでも、ラベルとフォーム要素の関連付けを label 要素の for 属性で適切に行ってください。

参考リンク

• MDN Web Docs — Vertical form controls