Vertical form controlsBaseline · Newly available
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.
Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Apr 18, 2024.
Browser support
DesktopChrome
1–123Not supported
124+Supportedsince Apr 16, 2024
Current: 155Edge
12–123Not supported
124+Supportedsince Apr 18, 2024
Current: 154Firefox
1–119Not supported
120+Supportedsince Nov 21, 2023
Current: 157Safari
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27MobileChrome Android
18–123Not supported
124+Supportedsince Apr 16, 2024
Current: 155Firefox Android
4–119Not supported
120+Supportedsince Nov 21, 2023
Current: 157Safari iOS
1–17.3Not supported
17.4+Supportedsince Mar 5, 2024
Current: 27How to use
Every current browser supports this, but it only became Baseline on Apr 18, 2024. Use it as a progressive enhancement, or keep a fallback if you support older devices.
Example
Full syntax and examples are on MDN — see the links below.
Feature detection
CSS · check before using
@supports (writing-mode: initial) {
/* styles that rely on writing-mode */
}
/* or in JavaScript */
if (CSS.supports("writing-mode", "initial")) {
// use it
}Specification
Sub-features
Support for each part of the feature (2). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| direction.vertical_slider_direction | 124 | 124 | ✕ | ✕ | 124 | ✕ | ✕ |
| writing-mode.vertical_oriented_form_controls | 124 | 124 | 120 | 17.4 | 124 | 120 | 17.4 |