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.
Overview
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.
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 |
- This browser only partially implements this feature
- Only supported for vertical range sliders.
- This browser only partially implements this feature
- Only supported for vertical range sliders.
- This browser only partially implements this feature
- Only supported for vertical range sliders.
- 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.
- This browser only partially implements this feature
- This feature was removed in a later browser version (124)
- This feature was removed in a later browser version (121)
- 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.
- This browser only partially implements this feature
- This feature was removed in a later browser version (124)
- This feature was removed in a later browser version (121)
- This browser only partially implements this feature
- This feature was removed in a later browser version (17.4)
- Support for range sliders, textual inputs, and textareas only
- 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.
- This browser only partially implements this feature
- This feature was removed in a later browser version (124)
- This feature was removed in a later browser version (121)
- This browser only partially implements this feature
- This feature was removed in a later browser version (17.4)
- Support for range sliders, textual inputs, and textareas only
Syntax
.vertical-form {
writing-mode: vertical-rl;
}
.vertical-form input[type="range"] {
/* Automatically displays vertically */
}Live demo
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
Powered by web-features