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

Di Zhang
Di Zhang

从 Chrome 119 发布到 Chrome 123 是 CSS 提供商提供的一项新的国际 CSS 功能 “写作模式（级别 4）”。纵向 表示这些元素可被 以纵向书写模式显示从 Chrome 123 开始，此功能将启用 本文对该功能进行了说明。

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

完全启用此功能后，即可使用竖向书写功能。 表单控件元素（如按钮、选择列表和进度）的 元素。若要使用，请将 CSS 属性 write-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.