Newly available Helpful when Vertical form controls improves stylesheet organization, fallback behavior, or cascade control.

Vertical form controls

The writing-mode CSS property orients form elements (such as radio buttons, progress bars, or select menus) vertically when the writing mode is vertical-lr or vertical-rl. The direction CSS property sets whether inputs flow from top to bottom or bottom to top.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.direction.vertical_slider_direction
124
124
120
16.5
124
16.5
CSS property
vertical oriented form controls

Vertically-oriented form controls
124
124
120
17.4
124
17.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only supported for vertical range sliders.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only supported for vertical range sliders.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only supported for vertical range sliders.
Notes 6 item(s)
Implementation note
  • Supported for select, button, textarea, textual input, range slider, meter, and progress elements.
  • Supported for select, button, textarea and textual input elements.
  • Only supported for select and button elements.
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (124)
  • This feature was removed in a later browser version (121)
Notes 6 item(s)
Implementation note
  • Supported for select, button, textarea, textual input, range slider, meter, and progress elements.
  • Supported for select, button, textarea and textual input elements.
  • Only supported for select and button elements.
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (124)
  • This feature was removed in a later browser version (121)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17.4)
Implementation note
  • Support for range sliders, textual inputs, and textareas only
Notes 6 item(s)
Implementation note
  • Supported for select, button, textarea, textual input, range slider, meter, and progress elements.
  • Supported for select, button, textarea and textual input elements.
  • Only supported for select and button elements.
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (124)
  • This feature was removed in a later browser version (121)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17.4)
Implementation note
  • Support for range sliders, textual inputs, and textareas only

Syntax

CSS 
.vertical-form {
  writing-mode: vertical-rl;
}
.vertical-form input[type="range"] {
  /* Automatically displays vertically */
}

Live demo

vertical writingrange

CSS vertical writingrange demo.

PreviewFullscreen

vertical writingprogress

CSS vertical writingprogress demo.

PreviewFullscreen

vertical writingme-ta-

CSS vertical writingme-ta- demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use Vertical form controls to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links