适用于表单控件元素的 CSS 垂直书写模式

Di Zhang
Di Zhang

从 Chrome 119 到 123 推出了 CSS 写入模式级别 4 中新增的国际 CSS 功能。表单控件元素的垂直书写模式意味着这些元素可以以垂直书写模式显示。在 Chrome 123 中，此功能将面向所有用户启用，本文将对其进行介绍。

基于文本的表单控件元素的垂直书写模式

完全启用此功能后，您将能够对按钮、选择列表和进度元素等表单控件元素使用纵向编写模式。如需使用它，请将 CSS 属性 writing-mode 设置为 vertical-lr（对于从左到右的块流方向）和 vertical-rl（对于从右到左的块流方向）。

这对许多传统上使用竖向文字书写的东亚语言非常有用。例如，传统日语通常从右向左垂直书写。

竖屏书写模式示例

以下是一些垂直表单控件的国际化示例。

按钮

<html lang="zh">

<button>请点击</button>

button {
  writing-mode: vertical-rl;
}

一个带有垂直文本的按钮。

<select> 元素

您可以指定 <select> 元素将垂直显示所有文本。

select {
  writing-mode: vertical-lr;
}

<select multiple>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

<select>
  <option>日本語  
  <option>中文
  <option>English
  <option>français
  <option>فارسی
</select>

包含垂直文本的选择列表。

请注意，当前实现仍会以横向方式显示弹出式窗口的选项。

文本输入

对于许多基于文本输入的表单控件，现在可以在输入文本时使用竖屏书写模式。

textarea {
  writing-mode: vertical-rl;
  width: 5em;
  height: 20em;
}

<textarea>
古池や蛙飛び込む水の音
ふるいけやかわずとびこむみずのおと
</textarea>

包含垂直文本的文本区域。

滑块

以直观的方式显示表单元素的值也很有用。<meter>、<progress> 和 <input type=range> 等滑块就是这样做的。

各种滑块控件。

以前，只有 <range> 可以使用非标准 CSS 外观值 slider-vertical 垂直呈现。现在，您可以使用 CSS writing-mode 属性将这三个元素垂直显示。

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
}

垂直显示的滑块控件。

默认情况下，CSS 方向设置为 ltr。这意味着值将从上到下呈现。您可以通过将方向设置为 rtl，将值的方向指定为从底部到顶部。

input[type="range"], meter, progress {
  writing-mode: vertical-lr;
  direction: rtl;
}

从底部到顶部垂直显示的滑块控件。

Chrome 122 中有一个用于更改值方向的实验。如果您有任何反馈，欢迎告诉我们。

互动和分享反馈

如需分享有关这些功能的反馈，请访问 crbug.com 提交问题。